Merge branch 'main' into patch-1

.eslintrc.json

@@ -3,11 +3,12 @@
   "env": {
     "browser": true
   },
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "jsx-a11y"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:inferno/recommended"
+    "plugin:inferno/recommended",
+    "plugin:jsx-a11y/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -20,6 +21,16 @@
     "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/no-empty-function": 0,
     "arrow-body-style": 0,
+    "jsx-a11y/alt-text": 1,
+    "jsx-a11y/anchor-is-valid": 1,
+    "jsx-a11y/aria-activedescendant-has-tabindex": 1,
+    "jsx-a11y/aria-role": 1,
+    "jsx-a11y/click-events-have-key-events": 1,
+    "jsx-a11y/iframe-has-title": 1,
+    "jsx-a11y/interactive-supports-focus": 1,
+    "jsx-a11y/no-redundant-roles": 1,
+    "jsx-a11y/no-static-element-interactions": 1,
+    "jsx-a11y/role-has-required-aria-props": 1,
     "curly": 0,
     "eol-last": 0,
     "eqeqeq": 0,

.github/CODEOWNERS

@@ -1 +1 @@
-* @dessalines @SleeplessOne1917
+* @dessalines @SleeplessOne1917 @alectrocute

.github/ISSUE_TEMPLATE/BUG_REPORT.yml

@@ -8,7 +8,7 @@ body:
       value: |
         Found a bug? Please fill out the sections below. 👍
         Thanks for taking the time to fill out this bug report!
-        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
   - type: checkboxes
     attributes:
       label: Requirements

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml

@@ -1,16 +1,16 @@
 name: "\U0001F680 Feature request"
-description: Suggest an idea for improving Lemmy
+description: Suggest an idea for improving Lemmy's UI
 labels: ["enhancement"]
 body:
   - type: markdown
     attributes:
       value: |
         Have a suggestion about Lemmy's UI?
-        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
   - type: checkboxes
     attributes:
       label: Requirements
-      description: Before you create a bug report please do the following.
+      description: Before you create a feature request please do the following.
       options:
         - label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
           required: true

.prettierignore

@@ -1,2 +1,3 @@
 src/shared/translations
 lemmy-translations
+src/assets/css/themes/*.css

lemmy-translations

@@ -1 +1 @@
-Subproject commit f45ddff206adb52ab0ac7555bf14978edac5d2f2
+Subproject commit 7fc71d0860bbe5c6d620ec27112350ffe5b9229c

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.0-rc.1",
+  "version": "0.18.0-rc.3",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",
@@ -12,14 +12,26 @@
     "build:prod": "webpack --mode=production",
     "clean": "yarn run rimraf dist",
     "dev": "yarn start",
-    "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
+    "lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
     "prepare": "husky install",
-    "start": "yarn build:dev --watch"
+    "start": "yarn build:dev --watch",
+    "themes:build": "sass src/assets/css/themes/:src/assets/css/themes",
+    "themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes",
+    "translations:generate": "node generate_translations.js",
+    "translations:init": "git submodule init && yarn translations:update",
+    "translations:update": "git submodule update --remote --recursive"
   },
   "lint-staged": {
-    "*.{ts,tsx,js}": ["prettier --write", "eslint --fix"],
+    "*.{ts,tsx,js}": [
-    "*.{css, scss}": ["prettier --write"],
+      "prettier --write",
-    "package.json": ["sortpack"]
+      "eslint --fix"
+    ],
+    "*.{css, scss}": [
+      "prettier --write"
+    ],
+    "package.json": [
+      "sortpack"
+    ]
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.21.0",
@@ -54,7 +66,7 @@
     "inferno-server": "^8.1.1",
     "isomorphic-cookie": "^1.2.4",
     "jwt-decode": "^3.1.2",
-    "lemmy-js-client": "0.17.2-rc.24",
+    "lemmy-js-client": "0.18.0-rc.1",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "markdown-it-container": "^3.0.0",
@@ -94,9 +106,9 @@
     "@types/toastify-js": "^1.11.1",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "bootswatch": "^5.2.3",
     "eslint": "^8.40.0",
     "eslint-plugin-inferno": "^7.32.2",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
     "import-sort-style-module": "^6.0.0",
@@ -109,6 +121,7 @@
     "sortpack": "^2.3.4",
     "style-loader": "^3.3.2",
     "terser": "^5.17.3",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "^5.0.4",
     "webpack-dev-server": "4.15.0"
   },

src/assets/css/main.css

@@ -21,7 +21,7 @@
 }
 
 .upvote:hover {
-  color: var(--info);
+  color: var(--bs-info);
 }
 
 .upvote {
@@ -29,14 +29,14 @@
 }
 
 .downvote:hover {
-  color: var(--danger);
+  color: var(--bs-danger);
 }
 
 .downvote {
   margin-top: -10px;
 }
 
-.custom-select {
+.form-select {
   -moz-appearance: none;
 }
 
@@ -46,7 +46,7 @@
 }
 
 .md-div p:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .md-div img {
@@ -84,12 +84,8 @@
   margin-top: -6.5px;
 }
 
-.post-title {
-  line-height: 1;
-}
-
 .post-title a:visited {
-  color: var(--gray) !important;
+  color: var(--bs-gray) !important;
 }
 
 .icon {
@@ -179,7 +175,7 @@
 }
 
 blockquote {
-  border-left: 2px solid var(--secondary);
+  border-left: 2px solid var(--bs-secondary);
   margin: 0.5em 5px;
   padding: 0.1em 5px;
 }
@@ -218,7 +214,7 @@ blockquote {
 }
 
 hr {
-  border-top: 1px solid var(--light);
+  border-top: 1px solid var(--bs-light);
 }
 
 .emoji {
@@ -270,6 +266,14 @@ hr {
   -ms-transform: scale(1.2);
 }
 
+/**
+ * TODO: Fix this in markup rather than this overly specific selector:
+ * https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons
+ */
+.btn.d-block + .btn.d-block {
+  margin-top: 0.5rem;
+}
+
 .mini-overlay {
   position: absolute;
   top: 0;
@@ -367,16 +371,16 @@ br.big {
   margin-top: 2px;
   padding: 0;
   list-style: none;
-  background: var(--light);
+  background: var(--bs-light);
 }
 
 .tribute-container li {
-  padding: 5px 5px;
+  padding: 5px;
   cursor: pointer;
 }
 
 .tribute-container li.highlight {
-  background: var(--primary);
+  background: var(--bs-primary);
 }
 
 .tribute-container li span {
@@ -410,13 +414,22 @@ br.big {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
-.lang-select-action {
-  width: 100px;
-}
 
-.lang-select-action:focus {
+#emoji-picker {
-  width: auto;
-}
-em-emoji-picker {
   width: 100%;
 }
+
+.skip-link {
+  top: -40px;
+  transition: top 0.3s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skip-link {
+    transition: none;
+  }
+}
+
+.skip-link:focus {
+  top: 0;
+}

src/assets/css/themes/_variables.darkly-red.scss

@@ -0,0 +1,7 @@
+@import "variables.darkly";
+
+$primary: $blue;
+$secondary: #444;
+$light: $gray-800;
+
+$link-color: $red;

src/assets/css/themes/_variables.darkly.scss

@@ -1,35 +1,34 @@
+@import "./variables";
+
+// Colors
 $white: #fff;
-$gray-100: #f8f9fa;
 $gray-200: #ebebeb;
 $gray-300: #dee2e6;
-$gray-400: #ced4da;
 $gray-500: #adb5bd;
 $gray-600: #888;
 $gray-700: #444;
 $gray-800: #303030;
 $gray-900: #222;
-$black: #000;
+
 $blue: #375a7f;
-$indigo: #6610f2;
-$purple: #6f42c1;
-$pink: #e83e8c;
 $red: #e74c3c;
-$orange: #fd7e14;
 $yellow: #f39c12;
 $green: #00bc8c;
-$teal: #20c997;
 $cyan: #3498db;
-$primary: $blue;
+
+$primary: $green;
 $secondary: $gray-700;
 $success: $green;
-$info: $cyan;
-$warning: $yellow;
-$danger: $red;
 $dark: $gray-300;
-$yiq-contrasted-threshold: 175;
+
-$body-bg: $gray-900;
 $body-color: $gray-300;
+$body-bg: $gray-900;
 $link-color: $success;
+$border-color: rgba($body-color, 0.25);
+$mark-bg: #333;
+$text-muted: $gray-600;
+$yiq-contrasted-threshold: 175;
+
 $font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
   Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
   "Segoe UI Emoji", "Segoe UI Symbol";
@@ -37,28 +36,10 @@ $font-size-base: 0.9375rem;
 $h1-font-size: 3rem;
 $h2-font-size: 2.5rem;
 $h3-font-size: 2rem;
-$text-muted: $gray-600;
+
-$table-accent-bg: $gray-800;
+$card-cap-bg: $gray-700;
-$table-border-color: $gray-700;
+$card-bg: $gray-800;
-$input-border-color: $body-bg;
+
-$input-group-addon-color: $gray-500;
-$input-group-addon-bg: $gray-700;
-$custom-file-color: $gray-500;
-$custom-file-border-color: $body-bg;
-$dropdown-bg: $gray-900;
-$dropdown-border-color: $gray-700;
-$dropdown-divider-bg: $gray-700;
-$dropdown-link-color: $white;
-$dropdown-link-hover-color: $white;
-$dropdown-link-hover-bg: $primary;
-$nav-link-padding-x: 2rem;
-$nav-link-disabled-color: $gray-500;
-$nav-tabs-border-color: $gray-700;
-$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
-  transparent;
-$nav-tabs-link-active-color: $white;
-$nav-tabs-link-active-border-color: $nav-tabs-border-color
-  $nav-tabs-border-color transparent;
 $navbar-padding-y: 1rem;
 $navbar-dark-color: rgba($white, 0.6);
 $navbar-dark-hover-color: $white;
@@ -66,6 +47,40 @@ $navbar-light-color: rgba($white, 0.6);
 $navbar-light-hover-color: $white;
 $navbar-light-active-color: $white;
 $navbar-light-toggler-border-color: rgba($gray-900, 0.1);
+$navbar-light-brand-color: $white;
+$navbar-light-brand-hover-color: $navbar-light-brand-color;
+
+$nav-link-padding-x: 2rem;
+$nav-link-disabled-color: $gray-500;
+
+$nav-tabs-border-color: $gray-700;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
+  transparent;
+$nav-tabs-link-active-color: $white;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color
+  $nav-tabs-border-color transparent;
+
+$input-bg: $gray-700;
+$input-color: $white;
+$input-disabled-bg: darken($gray-700, 10%);
+$input-border-color: $body-bg;
+$input-group-addon-color: $gray-500;
+$input-group-addon-bg: $gray-700;
+
+$hr-border-color: rgba($body-color, 0.25);
+
+$table-border-color: $gray-700;
+
+$custom-file-color: $gray-500;
+$custom-file-border-color: $body-bg;
+
+$dropdown-bg: $gray-900;
+$dropdown-border-color: $gray-700;
+$dropdown-divider-bg: $gray-700;
+$dropdown-link-color: $white;
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $primary;
+
 $pagination-color: $white;
 $pagination-bg: $success;
 $pagination-border-width: 0;
@@ -78,9 +93,8 @@ $pagination-active-border-color: transparent;
 $pagination-disabled-color: $white;
 $pagination-disabled-bg: darken($success, 15%);
 $pagination-disabled-border-color: transparent;
+
 $jumbotron-bg: $gray-800;
-$card-cap-bg: $gray-700;
-$card-bg: $gray-800;
 $popover-bg: $gray-800;
 $popover-header-bg: $gray-700;
 $toast-background-color: $gray-700;
@@ -96,12 +110,6 @@ $breadcrumb-bg: $gray-700;
 $close-color: $white;
 $close-text-shadow: none;
 $pre-color: inherit;
-$mark-bg: #333;
+$custom-select-bg: $gray-700;
-$custom-select-bg: $secondary;
 $custom-select-color: $white;
-$input-bg: $secondary;
-$input-color: $white;
-$input-disabled-bg: darken($secondary, 10%);
 $light: $gray-800;
-$navbar-light-brand-color: $navbar-dark-active-color;
-$navbar-light-brand-hover-color: $navbar-dark-active-color;

src/assets/css/themes/_variables.litely-red.scss

@@ -0,0 +1,4 @@
+@import "variables.litely";
+
+$secondary: #c80000;
+$danger: darken($primary, 24%);

src/assets/css/themes/_variables.litely.scss

@@ -1,33 +1,52 @@
-$white: #ffffff;
+@import "./variables";
-$orange: #f1641e;
+
-$cyan: #02bdc2;
+// Colors
-$green: #00c853;
+$gray-100: #f8f9fa;
-$secondary: $green;
+$gray-600: #6c757d;
-$body-color: $gray-700;
+$gray-700: #495057;
-$link-color: theme-color("primary");
+$gray-800: #343a40;
-$primary: $orange;
+$gray-900: #212529;
+$black: #222;
+
+$blue: #007bff;
+$indigo: #6610f2;
 $red: #d8486a;
+$orange: #f1641e;
+$green: #00a846;
+$cyan: #02bdc2;
+
+$primary: $orange;
+$secondary: $green;
+$success: $indigo;
+$info: $blue;
+$danger: darken($primary, 25%);
+
+$body-color: $gray-700;
+$body-bg: #fff;
+$link-color: $primary;
+$border-color: rgba($body-color, 0.25);
+$mark-bg: rgb(255, 252, 239);
+$headings-color: $gray-700;
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
+  "Segoe UI", "Helvetica", Arial, sans-serif;
+$font-weight-bold: 600;
+
+$card-color: $gray-700;
+$card-cap-color: $gray-700;
+$card-bg: $gray-100;
+
+$navbar-dark-toggler-border-color: rgba($black, 0.1);
+$navbar-light-color: $gray-600;
+$navbar-light-hover-color: $gray-900;
+$navbar-light-active-color: $gray-900;
+
+$form-feedback-valid-color: $info;
+$input-btn-focus-color: rgba($primary, 0.75);
+
 $border-radius: 0.5rem;
 $border-radius-lg: 0.5rem;
 $border-radius-sm: 1rem;
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
-  "Segoe UI", "Helvetica", Arial, sans-serif;
-$headings-color: $gray-700;
-$input-btn-focus-color: rgba($component-active-bg, 0.75);
-$form-feedback-valid-color: theme-color("info");
-$navbar-light-color: $gray-600;
-$black: #222222;
-$navbar-dark-toggler-border-color: rgba($black, 0.1);
-$navbar-light-active-color: $gray-900;
-$card-color: $gray-700;
-$card-cap-color: $gray-700;
-$info: $blue;
-$body-bg: #fff;
-$success: $indigo;
-$danger: darken($primary, 25%);
-$navbar-light-hover-color: $gray-900;
-$card-bg: $gray-100;
-$border-color: $gray-700;
-$mark-bg: rgb(255, 252, 239);
-$font-weight-bold: 600;
 $rounded-pill: 0.25rem;
+
+$hr-border-color: rgba($body-color, 0.25);

src/assets/css/themes/_variables.scss

@@ -0,0 +1,6 @@
+$link-decoration: none;
+$min-contrast-ratio: 3;
+
+$container-max-widths: (
+  lg: 1140px,
+);

src/assets/css/themes/darkly-red.scss

@@ -0,0 +1,2 @@
+@import "variables.darkly-red";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";

src/assets/css/themes/darkly.scss

@@ -0,0 +1,2 @@
+@import "variables.darkly";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";

src/assets/css/themes/litely-red.scss

@@ -0,0 +1,2 @@
+@import "variables.litely-red";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";

src/assets/css/themes/litely.scss

@@ -0,0 +1,2 @@
+@import "variables.litely";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";

src/client/index.tsx

@@ -1,14 +1,13 @@
 import { hydrate } from "inferno-hydrate";
 import { Router } from "inferno-router";
 import { App } from "../shared/components/app/app";
+import { HistoryService } from "../shared/services/HistoryService";
 import { initializeSite } from "../shared/utils";
 
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
-import { HistoryService } from "../shared/services/HistoryService";
 
-const site = window.isoData.site_res;
+initializeSite(window.isoData.site_res);
-initializeSite(site);
 
 const wrapper = (
   <Router history={HistoryService.history}>
@@ -17,6 +16,7 @@ const wrapper = (
 );
 
 const root = document.getElementById("root");
+
 if (root) {
   hydrate(wrapper, root);
 }

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

@@ -0,0 +1,116 @@
+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 { getHttpBaseInternal } from "../../shared/env";
+import {
+  InitialFetchRequest,
+  IsoDataOptionalSite,
+  RouteData,
+} from "../../shared/interfaces";
+import { routes } from "../../shared/routes";
+import {
+  FailedRequestState,
+  wrapClient,
+} from "../../shared/services/HttpService";
+import { ErrorPageData, initializeSite, isAuthPath } from "../../shared/utils";
+import { createSsrHtml } from "../utils/create-ssr-html";
+import { getErrorPageData } from "../utils/get-error-page-data";
+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);
+
+    const getSiteForm: GetSite = { auth };
+
+    const headers = setForwardedHeaders(req.headers);
+    const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
+
+    const { path, url, query } = req;
+
+    // Get site data first
+    // This bypasses errors, so that the client can hit the error on its own,
+    // in order to remove the jwt on the browser. Necessary for wrong jwts
+    let site: GetSiteResponse | undefined = undefined;
+    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"
+      );
+      getSiteForm.auth = undefined;
+      auth = undefined;
+      try_site = await client.getSite(getSiteForm);
+    }
+
+    if (!auth && isAuthPath(path)) {
+      return res.redirect("/login");
+    }
+
+    if (try_site.state === "success") {
+      site = try_site.data;
+      initializeSite(site);
+
+      if (path !== "/setup" && !site.site_view.local_site.site_setup) {
+        return res.redirect("/setup");
+      }
+
+      if (site && activeRoute?.fetchInitialData) {
+        const initialFetchReq: InitialFetchRequest = {
+          client,
+          auth,
+          path,
+          query,
+          site,
+        };
+
+        routeData = await activeRoute.fetchInitialData(initialFetchReq);
+      }
+    } else if (try_site.state === "failed") {
+      errorPageData = getErrorPageData(new Error(try_site.msg), site);
+    }
+
+    const error = Object.values(routeData).find(
+      res => res.state === "failed"
+    ) 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 {
+        errorPageData = getErrorPageData(new Error(error.msg), site);
+      }
+    }
+
+    const isoData: IsoDataOptionalSite = {
+      path,
+      site_res: site,
+      routeData,
+      errorPageData,
+    };
+
+    const wrapper = (
+      <StaticRouter location={url} context={isoData}>
+        <App />
+      </StaticRouter>
+    );
+
+    const root = renderToString(wrapper);
+
+    res.send(await createSsrHtml(root, isoData));
+  } catch (err) {
+    // 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/handlers/robots-handler.ts

@@ -0,0 +1,18 @@
+import type { Response } from "express";
+
+export default async ({ res }: { res: Response }) => {
+  res.setHeader("content-type", "text/plain; charset=utf-8");
+
+  res.send(`User-Agent: *
+  Disallow: /login
+  Disallow: /settings
+  Disallow: /create_community
+  Disallow: /create_post
+  Disallow: /create_private_message
+  Disallow: /inbox
+  Disallow: /setup
+  Disallow: /admin
+  Disallow: /password_change
+  Disallow: /search/
+  `);
+};

src/server/handlers/service-worker-handler.ts

@@ -0,0 +1,14 @@
+import type { Response } from "express";
+import path from "path";
+
+export default async ({ res }: { res: Response }) => {
+  res
+    .setHeader("Content-Type", "application/javascript")
+    .sendFile(
+      path.resolve(
+        `./dist/service-worker${
+          process.env.NODE_ENV === "development" ? "-development" : ""
+        }.js`
+      )
+    );
+};

src/server/handlers/theme-handler.ts

@@ -0,0 +1,32 @@
+import type { Request, Response } from "express";
+import { existsSync } from "fs";
+import path from "path";
+
+const extraThemesFolder =
+  process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
+
+export default async (req: Request, res: Response) => {
+  res.contentType("text/css");
+
+  const theme = req.params.name;
+
+  if (!theme.endsWith(".css")) {
+    res.statusCode = 400;
+    res.send("Theme must be a css file");
+  }
+
+  const customTheme = path.resolve(extraThemesFolder, theme);
+
+  if (existsSync(customTheme)) {
+    res.sendFile(customTheme);
+  } else {
+    const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
+
+    // If the theme doesn't exist, just send litely
+    if (existsSync(internalTheme)) {
+      res.sendFile(internalTheme);
+    } else {
+      res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
+    }
+  }
+};

src/server/handlers/themes-list-handler.ts

@@ -0,0 +1,6 @@
+import type { Response } from "express";
+import { buildThemeList } from "../utils/build-themes-list";
+
+export default async ({ res }: { res: Response }) => {
+  res.type("json").send(JSON.stringify(await buildThemeList()));
+};

src/server/index.tsx

@@ -1,465 +1,38 @@
 import express from "express";
-import { existsSync } from "fs";
-import { readdir, readFile } from "fs/promises";
-import { IncomingHttpHeaders } from "http";
-import { Helmet } from "inferno-helmet";
-import { matchPath, StaticRouter } from "inferno-router";
-import { renderToString } from "inferno-server";
-import IsomorphicCookie from "isomorphic-cookie";
-import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
 import path from "path";
 import process from "process";
-import serialize from "serialize-javascript";
+import CatchAllHandler from "./handlers/catch-all-handler";
-import sharp from "sharp";
+import RobotsHandler from "./handlers/robots-handler";
-import { App } from "../shared/components/app/app";
+import ServiceWorkerHandler from "./handlers/service-worker-handler";
-import { getHttpBaseExternal, getHttpBaseInternal } from "../shared/env";
+import ThemeHandler from "./handlers/theme-handler";
-import {
+import ThemesListHandler from "./handlers/themes-list-handler";
-  ILemmyConfig,
+import setDefaultCsp from "./middleware/set-default-csp";
-  InitialFetchRequest,
-  IsoDataOptionalSite,
-} from "../shared/interfaces";
-import { routes } from "../shared/routes";
-import { RequestState, wrapClient } from "../shared/services/HttpService";
-import {
-  ErrorPageData,
-  favIconPngUrl,
-  favIconUrl,
-  initializeSite,
-  isAuthPath,
-} from "../shared/utils";
 
 const server = express();
+
 const [hostname, port] = process.env["LEMMY_UI_HOST"]
   ? process.env["LEMMY_UI_HOST"].split(":")
   : ["0.0.0.0", "1234"];
-const extraThemesFolder =
-  process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
-
-if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
-  server.use(function (_req, res, next) {
-    res.setHeader(
-      "Content-Security-Policy",
-      `default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
-    );
-    next();
-  });
-}
-const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
 
 server.use(express.json());
 server.use(express.urlencoded({ extended: false }));
 server.use("/static", express.static(path.resolve("./dist")));
 
-const robotstxt = `User-Agent: *
+if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
-Disallow: /login
+  server.use(setDefaultCsp);
-Disallow: /settings
-Disallow: /create_community
-Disallow: /create_post
-Disallow: /create_private_message
-Disallow: /inbox
-Disallow: /setup
-Disallow: /admin
-Disallow: /password_change
-Disallow: /search/
-`;
-
-server.get("/service-worker.js", async (_req, res) => {
-  res.setHeader("Content-Type", "application/javascript");
-  res.sendFile(
-    path.resolve(
-      `./dist/service-worker${
-        process.env.NODE_ENV === "development" ? "-development" : ""
-      }.js`
-    )
-  );
-});
-
-server.get("/robots.txt", async (_req, res) => {
-  res.setHeader("content-type", "text/plain; charset=utf-8");
-  res.send(robotstxt);
-});
-
-server.get("/css/themes/:name", async (req, res) => {
-  res.contentType("text/css");
-  const theme = req.params.name;
-  if (!theme.endsWith(".css")) {
-    res.statusCode = 400;
-    res.send("Theme must be a css file");
-  }
-
-  const customTheme = path.resolve(`${extraThemesFolder}/${theme}`);
-  if (existsSync(customTheme)) {
-    res.sendFile(customTheme);
-  } else {
-    const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
-
-    // If the theme doesn't exist, just send litely
-    if (existsSync(internalTheme)) {
-      res.sendFile(internalTheme);
-    } else {
-      res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
-    }
-  }
-});
-
-async function buildThemeList(): Promise<string[]> {
-  const themes = ["darkly", "darkly-red", "litely", "litely-red"];
-  if (existsSync(extraThemesFolder)) {
-    const dirThemes = await readdir(extraThemesFolder);
-    const cssThemes = dirThemes
-      .filter(d => d.endsWith(".css"))
-      .map(d => d.replace(".css", ""));
-    themes.push(...cssThemes);
-  }
-  return themes;
 }
 
-server.get("/css/themelist", async (_req, res) => {
+server.get("/robots.txt", RobotsHandler);
-  res.type("json");
+server.get("/service-worker.js", ServiceWorkerHandler);
-  res.send(JSON.stringify(await buildThemeList()));
+server.get("/css/themes/:name", ThemeHandler);
-});
+server.get("/css/themelist", ThemesListHandler);
-
+server.get("/*", CatchAllHandler);
-// server.use(cookieParser());
-server.get("/*", async (req, res) => {
-  try {
-    const activeRoute = routes.find(route => matchPath(req.path, route));
-    let auth: string | undefined = IsomorphicCookie.load("jwt", req);
-
-    const getSiteForm: GetSite = { auth };
-
-    const headers = setForwardedHeaders(req.headers);
-    const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
-
-    const { path, url, query } = req;
-
-    // Get site data first
-    // This bypasses errors, so that the client can hit the error on its own,
-    // in order to remove the jwt on the browser. Necessary for wrong jwts
-    let site: GetSiteResponse | undefined = undefined;
-    const routeData: RequestState<any>[] = [];
-    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"
-      );
-      getSiteForm.auth = undefined;
-      auth = undefined;
-      try_site = await client.getSite(getSiteForm);
-    }
-
-    if (!auth && isAuthPath(path)) {
-      return res.redirect("/login");
-    }
-
-    if (try_site.state === "success") {
-      site = try_site.data;
-      initializeSite(site);
-
-      if (path !== "/setup" && !site.site_view.local_site.site_setup) {
-        return res.redirect("/setup");
-      }
-
-      if (site) {
-        const initialFetchReq: InitialFetchRequest = {
-          client,
-          auth,
-          path,
-          query,
-          site,
-        };
-
-        if (activeRoute?.fetchInitialData) {
-          routeData.push(
-            ...(await Promise.all([
-              ...activeRoute.fetchInitialData(initialFetchReq),
-            ]))
-          );
-        }
-      }
-    } else if (try_site.state === "failed") {
-      errorPageData = getErrorPageData(new Error(try_site.msg), site);
-    }
-
-    // Redirect to the 404 if there's an API error
-    if (routeData[0] && routeData[0].state === "failed") {
-      const error = routeData[0].msg;
-      console.error(error);
-      if (error === "instance_is_private") {
-        return res.redirect(`/signup`);
-      } else {
-        errorPageData = getErrorPageData(new Error(error), site);
-      }
-    }
-
-    const isoData: IsoDataOptionalSite = {
-      path,
-      site_res: site,
-      routeData,
-      errorPageData,
-    };
-
-    const wrapper = (
-      <StaticRouter location={url} context={isoData}>
-        <App />
-      </StaticRouter>
-    );
-
-    const root = renderToString(wrapper);
-
-    res.send(await createSsrHtml(root, isoData));
-  } catch (err) {
-    // 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"
-    );
-  }
-});
 
 server.listen(Number(port), hostname, () => {
   console.log(`http://${hostname}:${port}`);
 });
 
-function setForwardedHeaders(headers: IncomingHttpHeaders): {
-  [key: string]: string;
-} {
-  const out: { [key: string]: string } = {};
-  if (headers.host) {
-    out.host = headers.host;
-  }
-  const realIp = headers["x-real-ip"];
-  if (realIp) {
-    out["x-real-ip"] = realIp as string;
-  }
-  const forwardedFor = headers["x-forwarded-for"];
-  if (forwardedFor) {
-    out["x-forwarded-for"] = forwardedFor as string;
-  }
-
-  return out;
-}
-
 process.on("SIGINT", () => {
   console.info("Interrupted");
   process.exit(0);
 });
-
-const iconSizes = [72, 96, 144, 192, 512];
-const defaultLogoPathDirectory = path.join(
-  process.cwd(),
-  "dist",
-  "assets",
-  "icons"
-);
-
-export async function generateManifestBase64({
-  my_user,
-  site_view: {
-    site,
-    local_site: { community_creation_admin_only },
-  },
-}: GetSiteResponse) {
-  const url = getHttpBaseExternal();
-
-  const icon = site.icon ? await fetchIconPng(site.icon) : null;
-
-  const manifest = {
-    name: site.name,
-    description: site.description ?? "A link aggregator for the fediverse",
-    start_url: url,
-    scope: url,
-    display: "standalone",
-    id: "/",
-    background_color: "#222222",
-    theme_color: "#222222",
-    icons: await Promise.all(
-      iconSizes.map(async size => {
-        let src = await readFile(
-          path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
-        ).then(buf => buf.toString("base64"));
-
-        if (icon) {
-          src = await sharp(icon)
-            .resize(size, size)
-            .png()
-            .toBuffer()
-            .then(buf => buf.toString("base64"));
-        }
-
-        return {
-          sizes: `${size}x${size}`,
-          type: "image/png",
-          src: `data:image/png;base64,${src}`,
-          purpose: "any maskable",
-        };
-      })
-    ),
-    shortcuts: [
-      {
-        name: "Search",
-        short_name: "Search",
-        description: "Perform a search.",
-        url: "/search",
-      },
-      {
-        name: "Communities",
-        url: "/communities",
-        short_name: "Communities",
-        description: "Browse communities",
-      },
-    ]
-      .concat(
-        my_user
-          ? [
-              {
-                name: "Create Post",
-                url: "/create_post",
-                short_name: "Create Post",
-                description: "Create a post.",
-              },
-            ]
-          : []
-      )
-      .concat(
-        my_user?.local_user_view.person.admin || !community_creation_admin_only
-          ? [
-              {
-                name: "Create Community",
-                url: "/create_community",
-                short_name: "Create Community",
-                description: "Create a community",
-              },
-            ]
-          : []
-      ),
-    related_applications: [
-      {
-        platform: "f-droid",
-        url: "https://f-droid.org/packages/com.jerboa/",
-        id: "com.jerboa",
-      },
-    ],
-  };
-
-  return Buffer.from(JSON.stringify(manifest)).toString("base64");
-}
-
-async function fetchIconPng(iconUrl: string) {
-  return await fetch(iconUrl)
-    .then(res => res.blob())
-    .then(blob => blob.arrayBuffer());
-}
-
-function getErrorPageData(error: Error, site?: GetSiteResponse) {
-  const errorPageData: ErrorPageData = {};
-
-  if (site) {
-    errorPageData.error = error.message;
-  }
-
-  const adminMatrixIds = site?.admins
-    .map(({ person: { matrix_user_id } }) => matrix_user_id)
-    .filter(id => id) as string[] | undefined;
-  if (adminMatrixIds && adminMatrixIds.length > 0) {
-    errorPageData.adminMatrixIds = adminMatrixIds;
-  }
-
-  return errorPageData;
-}
-
-async function createSsrHtml(root: string, isoData: IsoDataOptionalSite) {
-  const site = isoData.site_res;
-  const appleTouchIcon = site?.site_view.site.icon
-    ? `data:image/png;base64,${sharp(
-        await fetchIconPng(site.site_view.site.icon)
-      )
-        .resize(180, 180)
-        .extend({
-          bottom: 20,
-          top: 20,
-          left: 20,
-          right: 20,
-          background: "#222222",
-        })
-        .png()
-        .toBuffer()
-        .then(buf => buf.toString("base64"))}`
-    : favIconPngUrl;
-
-  const erudaStr =
-    process.env["LEMMY_UI_DEBUG"] === "true"
-      ? renderToString(
-          <>
-            <script src="//cdn.jsdelivr.net/npm/eruda"></script>
-            <script>eruda.init();</script>
-          </>
-        )
-      : "";
-
-  const helmet = Helmet.renderStatic();
-
-  const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
-
-  return `
-  <!DOCTYPE html>
-  <html ${helmet.htmlAttributes.toString()}>
-  <head>
-  <script>window.isoData = ${serialize(isoData)}</script>
-  <script>window.lemmyConfig = ${serialize(config)}</script>
-
-  <!-- A remote debugging utility for mobile -->
-  ${erudaStr}
-
-  <!-- Custom injected script -->
-  ${customHtmlHeader}
-
-  ${helmet.title.toString()}
-  ${helmet.meta.toString()}
-
-  <!-- Required meta tags -->
-  <meta name="Description" content="Lemmy">
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
-  <link
-     id="favicon"
-     rel="shortcut icon"
-     type="image/x-icon"
-     href=${site?.site_view.site.icon ?? favIconUrl}
-   />
-
-  <!-- Web app manifest -->
-  ${
-    site &&
-    `<link
-        rel="manifest"
-        href=${`data:application/manifest+json;base64,${await generateManifestBase64(
-          site
-        )}`}
-      />`
-  }
-  <link rel="apple-touch-icon" href=${appleTouchIcon} />
-  <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
-
-  <!-- Styles -->
-  <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
-
-  <!-- Current theme and more -->
-  ${helmet.link.toString()}
-  
-  </head>
-
-  <body ${helmet.bodyAttributes.toString()}>
-    <noscript>
-      <div class="alert alert-danger rounded-0" role="alert">
-        <b>Javascript is disabled. Actions will not work.</b>
-      </div>
-    </noscript>
-
-    <div id='root'>${root}</div>
-    <script defer src='/static/js/client.js'></script>
-  </body>
-</html>
-`;
-}

src/server/middleware/set-default-csp.ts

@@ -0,0 +1,10 @@
+import type { NextFunction, Response } from "express";
+
+export default function ({ res, next }: { res: Response; next: NextFunction }) {
+  res.setHeader(
+    "Content-Security-Policy",
+    `default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
+  );
+
+  next();
+}

src/server/utils/build-themes-list.ts

@@ -0,0 +1,18 @@
+import { existsSync } from "fs";
+import { readdir } from "fs/promises";
+
+const extraThemesFolder =
+  process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
+
+const themes = ["darkly", "darkly-red", "litely", "litely-red"];
+
+export async function buildThemeList(): Promise<string[]> {
+  if (existsSync(extraThemesFolder)) {
+    const dirThemes = await readdir(extraThemesFolder);
+    const cssThemes = dirThemes
+      .filter(d => d.endsWith(".css"))
+      .map(d => d.replace(".css", ""));
+    themes.push(...cssThemes);
+  }
+  return themes;
+}

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

@@ -0,0 +1,109 @@
+import { Helmet } from "inferno-helmet";
+import { renderToString } from "inferno-server";
+import serialize from "serialize-javascript";
+import sharp from "sharp";
+import { ILemmyConfig, IsoDataOptionalSite } from "../../shared/interfaces";
+import { favIconPngUrl, favIconUrl } from "../../shared/utils";
+import { fetchIconPng } from "./fetch-icon-png";
+import { generateManifestBase64 } from "./generate-manifest-base64";
+
+const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
+
+export async function createSsrHtml(
+  root: string,
+  isoData: IsoDataOptionalSite
+) {
+  const site = isoData.site_res;
+
+  const appleTouchIcon = site?.site_view.site.icon
+    ? `data:image/png;base64,${sharp(
+        await fetchIconPng(site.site_view.site.icon)
+      )
+        .resize(180, 180)
+        .extend({
+          bottom: 20,
+          top: 20,
+          left: 20,
+          right: 20,
+          background: "#222222",
+        })
+        .png()
+        .toBuffer()
+        .then(buf => buf.toString("base64"))}`
+    : favIconPngUrl;
+
+  const erudaStr =
+    process.env["LEMMY_UI_DEBUG"] === "true"
+      ? renderToString(
+          <>
+            <script src="//cdn.jsdelivr.net/npm/eruda"></script>
+            <script>eruda.init();</script>
+          </>
+        )
+      : "";
+
+  const helmet = Helmet.renderStatic();
+
+  const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
+
+  return `
+    <!DOCTYPE html>
+    <html ${helmet.htmlAttributes.toString()}>
+    <head>
+    <script>window.isoData = ${serialize(isoData)}</script>
+    <script>window.lemmyConfig = ${serialize(config)}</script>
+  
+    <!-- A remote debugging utility for mobile -->
+    ${erudaStr}
+  
+    <!-- Custom injected script -->
+    ${customHtmlHeader}
+  
+    ${helmet.title.toString()}
+    ${helmet.meta.toString()}
+  
+    <!-- Required meta tags -->
+    <meta name="Description" content="Lemmy">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
+    <link
+       id="favicon"
+       rel="shortcut icon"
+       type="image/x-icon"
+       href=${site?.site_view.site.icon ?? favIconUrl}
+     />
+  
+    <!-- Web app manifest -->
+    ${
+      site &&
+      `<link
+          rel="manifest"
+          href=${`data:application/manifest+json;base64,${await generateManifestBase64(
+            site
+          )}`}
+        />`
+    }
+    <link rel="apple-touch-icon" href=${appleTouchIcon} />
+    <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
+  
+    <!-- Styles -->
+    <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
+  
+    <!-- Current theme and more -->
+    ${helmet.link.toString()}
+    
+    </head>
+  
+    <body ${helmet.bodyAttributes.toString()}>
+      <noscript>
+        <div class="alert alert-danger rounded-0" role="alert">
+          <b>Javascript is disabled. Actions will not work.</b>
+        </div>
+      </noscript>
+  
+      <div id='root'>${root}</div>
+      <script defer src='/static/js/client.js'></script>
+    </body>
+  </html>
+  `;
+}

src/server/utils/fetch-icon-png.ts

@@ -0,0 +1,5 @@
+export async function fetchIconPng(iconUrl: string) {
+  return await fetch(iconUrl)
+    .then(res => res.blob())
+    .then(blob => blob.arrayBuffer());
+}

src/server/utils/generate-manifest-base64.ts

@@ -0,0 +1,107 @@
+import { readFile } from "fs/promises";
+import { GetSiteResponse } from "lemmy-js-client";
+import path from "path";
+import sharp from "sharp";
+import { getHttpBaseExternal } from "../../shared/env";
+import { fetchIconPng } from "./fetch-icon-png";
+
+const iconSizes = [72, 96, 144, 192, 512];
+
+const defaultLogoPathDirectory = path.join(
+  process.cwd(),
+  "dist",
+  "assets",
+  "icons"
+);
+
+export async function generateManifestBase64({
+  my_user,
+  site_view: {
+    site,
+    local_site: { community_creation_admin_only },
+  },
+}: GetSiteResponse) {
+  const url = getHttpBaseExternal();
+
+  const icon = site.icon ? await fetchIconPng(site.icon) : null;
+
+  const manifest = {
+    name: site.name,
+    description: site.description ?? "A link aggregator for the fediverse",
+    start_url: url,
+    scope: url,
+    display: "standalone",
+    id: "/",
+    background_color: "#222222",
+    theme_color: "#222222",
+    icons: await Promise.all(
+      iconSizes.map(async size => {
+        let src = await readFile(
+          path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
+        ).then(buf => buf.toString("base64"));
+
+        if (icon) {
+          src = await sharp(icon)
+            .resize(size, size)
+            .png()
+            .toBuffer()
+            .then(buf => buf.toString("base64"));
+        }
+
+        return {
+          sizes: `${size}x${size}`,
+          type: "image/png",
+          src: `data:image/png;base64,${src}`,
+          purpose: "any maskable",
+        };
+      })
+    ),
+    shortcuts: [
+      {
+        name: "Search",
+        short_name: "Search",
+        description: "Perform a search.",
+        url: "/search",
+      },
+      {
+        name: "Communities",
+        url: "/communities",
+        short_name: "Communities",
+        description: "Browse communities",
+      },
+    ]
+      .concat(
+        my_user
+          ? [
+              {
+                name: "Create Post",
+                url: "/create_post",
+                short_name: "Create Post",
+                description: "Create a post.",
+              },
+            ]
+          : []
+      )
+      .concat(
+        my_user?.local_user_view.person.admin || !community_creation_admin_only
+          ? [
+              {
+                name: "Create Community",
+                url: "/create_community",
+                short_name: "Create Community",
+                description: "Create a community",
+              },
+            ]
+          : []
+      ),
+    related_applications: [
+      {
+        platform: "f-droid",
+        url: "https://f-droid.org/packages/com.jerboa/",
+        id: "com.jerboa",
+      },
+    ],
+  };
+
+  return Buffer.from(JSON.stringify(manifest)).toString("base64");
+}

src/server/utils/get-error-page-data.ts

@@ -0,0 +1,20 @@
+import { GetSiteResponse } from "lemmy-js-client";
+import { ErrorPageData } from "../../shared/utils";
+
+export function getErrorPageData(error: Error, site?: GetSiteResponse) {
+  const errorPageData: ErrorPageData = {};
+
+  if (site) {
+    errorPageData.error = error.message;
+  }
+
+  const adminMatrixIds = site?.admins
+    .map(({ person: { matrix_user_id } }) => matrix_user_id)
+    .filter(id => id) as string[] | undefined;
+
+  if (adminMatrixIds && adminMatrixIds.length > 0) {
+    errorPageData.adminMatrixIds = adminMatrixIds;
+  }
+
+  return errorPageData;
+}

src/server/utils/set-forwarded-headers.ts

@@ -0,0 +1,25 @@
+import { IncomingHttpHeaders } from "http";
+
+export function setForwardedHeaders(headers: IncomingHttpHeaders): {
+  [key: string]: string;
+} {
+  const out: { [key: string]: string } = {};
+
+  if (headers.host) {
+    out.host = headers.host;
+  }
+
+  const realIp = headers["x-real-ip"];
+
+  if (realIp) {
+    out["x-real-ip"] = realIp as string;
+  }
+
+  const forwardedFor = headers["x-forwarded-for"];
+
+  if (forwardedFor) {
+    out["x-forwarded-for"] = forwardedFor as string;
+  }
+
+  return out;
+}

src/shared/components/app/app.tsx

@@ -1,4 +1,4 @@
-import { Component } from "inferno";
+import { Component, createRef, linkEvent, RefObject } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { i18n } from "../../i18next";
@@ -15,8 +15,15 @@ import { Theme } from "./theme";
 
 export class App extends Component<any, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
+  private readonly mainContentRef: RefObject<HTMLElement>;
   constructor(props: any, context: any) {
     super(props, context);
+    this.mainContentRef = createRef();
+  }
+
+  handleJumpToContent(event) {
+    event.preventDefault();
+    this.mainContentRef.current?.focus();
   }
   render() {
     const siteRes = this.isoData.site_res;
@@ -25,7 +32,13 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={i18n}>
-          <div id="app">
+          <div id="app" className="lemmy-site">
+            <a
+              className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
+              onClick={linkEvent(this, this.handleJumpToContent)}
+            >
+              ${i18n.t("jump_to_content", "Jump to content")}
+            </a>
             {siteView && (
               <Theme defaultTheme={siteView.local_site.default_theme} />
             )}
@@ -39,6 +52,7 @@ export class App extends Component<any, any> {
                     exact
                     component={routeProps => (
                       <ErrorGuard>
+                        <main tabIndex={-1} ref={this.mainContentRef}>
                           {RouteComponent &&
                             (isAuthPath(path ?? "") ? (
                               <AuthGuard>
@@ -47,6 +61,7 @@ export class App extends Component<any, any> {
                             ) : (
                               <RouteComponent {...routeProps} />
                             ))}
+                        </main>
                       </ErrorGuard>
                     )}
                   />

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

@@ -16,7 +16,7 @@ export class ErrorPage extends Component<any, any> {
     const { errorPageData } = this.isoData;
 
     return (
-      <div className="container-lg text-center">
+      <div className="error-page container-lg text-center">
         <h1>
           {errorPageData
             ? i18n.t("error_page_title")

src/shared/components/app/footer.tsx

@@ -16,9 +16,9 @@ export class Footer extends Component<FooterProps, any> {
 
   render() {
     return (
-      <nav className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
+      <footer className="app-footer container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
         <div className="navbar-collapse">
-          <ul className="navbar-nav ml-auto">
+          <ul className="navbar-nav ms-auto">
             {this.props.site?.version !== VERSION && (
               <li className="nav-item">
                 <span className="nav-link">UI: {VERSION}</span>
@@ -63,7 +63,7 @@ export class Footer extends Component<FooterProps, any> {
             </li>
           </ul>
         </div>
-      </nav>
+      </footer>
     );
   }
 }

src/shared/components/app/navbar.tsx

@@ -1,3 +1,6 @@
+import { isBrowser } from "@utils/browser";
+import { poll } from "@utils/helpers";
+import { amAdmin, canCreateCommunity } from "@utils/roles";
 import { Component, createRef, linkEvent } from "inferno";
 import { NavLink } from "inferno-router";
 import {
@@ -10,13 +13,9 @@ import { i18n } from "../../i18next";
 import { UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
-  amAdmin,
-  canCreateCommunity,
   donateLemmyUrl,
-  isBrowser,
   myAuth,
   numToSI,
-  poll,
   showAvatars,
   toast,
   updateUnreadCountsInterval,
@@ -86,11 +85,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     const siteView = this.props.siteRes?.site_view;
     const person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
-      <nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg">
+      <nav
+        className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
+        id="navbar"
+      >
         <NavLink
+          id="navTitle"
           to="/"
           title={siteView?.site.description ?? siteView?.site.name}
-          className="d-flex align-items-center navbar-brand mr-md-3"
+          className="d-flex align-items-center navbar-brand me-md-3"
           onMouseUp={linkEvent(this, handleCollapseClick)}
         >
           {siteView?.site.icon && showAvatars() && (
@@ -99,11 +102,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           {siteView?.site.name}
         </NavLink>
         {person && (
-          <ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
+          <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
-            <li className="nav-item">
+            <li id="navMessages" className="nav-item nav-item-icon">
               <NavLink
                 to="/inbox"
-                className="p-1 nav-link border-0"
+                className="p-1 nav-link border-0 nav-messages"
                 title={i18n.t("unread_messages", {
                   count: Number(this.state.unreadApplicationCountRes.state),
                   formattedCount: numToSI(this.unreadInboxCount),
@@ -112,14 +115,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               >
                 <Icon icon="bell" />
                 {this.unreadInboxCount > 0 && (
-                  <span className="mx-1 badge badge-light">
+                  <span className="mx-1 badge text-bg-light">
                     {numToSI(this.unreadInboxCount)}
                   </span>
                 )}
               </NavLink>
             </li>
             {this.moderatesSomething && (
-              <li className="nav-item">
+              <li className="nav-item nav-item-icon">
                 <NavLink
                   to="/reports"
                   className="p-1 nav-link border-0"
@@ -131,7 +134,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 >
                   <Icon icon="shield" />
                   {this.unreadReportCount > 0 && (
-                    <span className="mx-1 badge badge-light">
+                    <span className="mx-1 badge text-bg-light">
                       {numToSI(this.unreadReportCount)}
                     </span>
                   )}
@@ -139,7 +142,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               </li>
             )}
             {amAdmin() && (
-              <li className="nav-item">
+              <li className="nav-item nav-item-icon">
                 <NavLink
                   to="/registration_applications"
                   className="p-1 nav-link border-0"
@@ -151,7 +154,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 >
                   <Icon icon="clipboard" />
                   {this.unreadApplicationCount > 0 && (
-                    <span className="mx-1 badge badge-light">
+                    <span className="mx-1 badge text-bg-light">
                       {numToSI(this.unreadApplicationCount)}
                     </span>
                   )}
@@ -178,7 +181,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           id="navbarDropdown"
           ref={this.mobileMenuRef}
         >
-          <ul className="mr-auto navbar-nav">
+          <ul id="navbarLinks" className="me-auto navbar-nav">
             <li className="nav-item">
               <NavLink
                 to="/communities"
@@ -220,42 +223,51 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             )}
             <li className="nav-item">
               <a
-                className="nav-link"
+                className="nav-link d-inline-flex align-items-center d-md-inline-block"
                 title={i18n.t("support_lemmy")}
                 href={donateLemmyUrl}
               >
                 <Icon icon="heart" classes="small" />
+                <span className="d-inline ms-1 d-md-none ms-md-0">
+                  {i18n.t("support_lemmy")}
+                </span>
               </a>
             </li>
           </ul>
-          <ul className="navbar-nav">
+          <ul id="navbarIcons" className="navbar-nav">
-            <li className="nav-item">
+            <li id="navSearch" className="nav-item">
               <NavLink
                 to="/search"
-                className="nav-link"
+                className="nav-link d-inline-flex align-items-center d-md-inline-block"
                 title={i18n.t("search")}
                 onMouseUp={linkEvent(this, handleCollapseClick)}
               >
                 <Icon icon="search" />
+                <span className="d-inline ms-1 d-md-none ms-md-0">
+                  {i18n.t("search")}
+                </span>
               </NavLink>
             </li>
             {amAdmin() && (
-              <li className="nav-item">
+              <li id="navAdmin" className="nav-item">
                 <NavLink
                   to="/admin"
-                  className="nav-link"
+                  className="nav-link d-inline-flex align-items-center d-md-inline-block"
                   title={i18n.t("admin_settings")}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
                   <Icon icon="settings" />
+                  <span className="d-inline ms-1 d-md-none ms-md-0">
+                    {i18n.t("admin_settings")}
+                  </span>
                 </NavLink>
               </li>
             )}
             {person ? (
               <>
-                <li className="nav-item">
+                <li id="navMessages" className="nav-item">
                   <NavLink
-                    className="nav-link"
+                    className="nav-link d-inline-flex align-items-center d-md-inline-block"
                     to="/inbox"
                     title={i18n.t("unread_messages", {
                       count: Number(this.unreadInboxCount),
@@ -264,17 +276,23 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                     onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
                     <Icon icon="bell" />
+                    <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+                      {i18n.t("unread_messages", {
+                        count: Number(this.unreadInboxCount),
+                        formattedCount: numToSI(this.unreadInboxCount),
+                      })}
+                    </span>
                     {this.unreadInboxCount > 0 && (
-                      <span className="mx-1 badge badge-light">
+                      <span className="mx-1 badge text-bg-light">
                         {numToSI(this.unreadInboxCount)}
                       </span>
                     )}
                   </NavLink>
                 </li>
                 {this.moderatesSomething && (
-                  <li className="nav-item">
+                  <li id="navModeration" className="nav-item">
                     <NavLink
-                      className="nav-link"
+                      className="nav-link d-inline-flex align-items-center d-md-inline-block"
                       to="/reports"
                       title={i18n.t("unread_reports", {
                         count: Number(this.unreadReportCount),
@@ -283,8 +301,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
                       <Icon icon="shield" />
+                      <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+                        {i18n.t("unread_reports", {
+                          count: Number(this.unreadReportCount),
+                          formattedCount: numToSI(this.unreadReportCount),
+                        })}
+                      </span>
                       {this.unreadReportCount > 0 && (
-                        <span className="mx-1 badge badge-light">
+                        <span className="mx-1 badge text-bg-light">
                           {numToSI(this.unreadReportCount)}
                         </span>
                       )}
@@ -292,10 +316,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </li>
                 )}
                 {amAdmin() && (
-                  <li className="nav-item">
+                  <li id="navApplications" className="nav-item">
                     <NavLink
                       to="/registration_applications"
-                      className="nav-link"
+                      className="nav-link d-inline-flex align-items-center d-md-inline-block"
                       title={i18n.t("unread_registration_applications", {
                         count: Number(this.unreadApplicationCount),
                         formattedCount: numToSI(this.unreadApplicationCount),
@@ -303,8 +327,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
                       <Icon icon="clipboard" />
+                      <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
+                        {i18n.t("unread_registration_applications", {
+                          count: Number(this.unreadApplicationCount),
+                          formattedCount: numToSI(this.unreadApplicationCount),
+                        })}
+                      </span>
                       {this.unreadApplicationCount > 0 && (
-                        <span className="mx-1 badge badge-light">
+                        <span className="mx-1 badge text-bg-light">
                           {numToSI(this.unreadApplicationCount)}
                         </span>
                       )}
@@ -312,7 +342,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   </li>
                 )}
                 {person && (
-                  <div className="dropdown">
+                  <div id="dropdownUser" className="dropdown">
                     <button
                       className="btn dropdown-toggle"
                       role="button"
@@ -335,7 +365,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           title={i18n.t("profile")}
                           onMouseUp={linkEvent(this, handleCollapseClick)}
                         >
-                          <Icon icon="user" classes="mr-1" />
+                          <Icon icon="user" classes="me-1" />
                           {i18n.t("profile")}
                         </NavLink>
                       </li>
@@ -346,7 +376,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           title={i18n.t("settings")}
                           onMouseUp={linkEvent(this, handleCollapseClick)}
                         >
-                          <Icon icon="settings" classes="mr-1" />
+                          <Icon icon="settings" classes="me-1" />
                           {i18n.t("settings")}
                         </NavLink>
                       </li>
@@ -358,7 +388,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           className="dropdown-item btn btn-link px-2"
                           onClick={linkEvent(this, handleLogOut)}
                         >
-                          <Icon icon="log-out" classes="mr-1" />
+                          <Icon icon="log-out" classes="me-1" />
                           {i18n.t("logout")}
                         </button>
                       </li>

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

@@ -21,6 +21,7 @@ interface CommentFormProps {
   onReplyCancel?(): void;
   allLanguages: Language[];
   siteLanguages: number[];
+  containerClass?: string;
   onUpsertComment(form: EditComment | CreateComment): void;
 }
 
@@ -40,7 +41,11 @@ export class CommentForm extends Component<CommentFormProps, any> {
         : undefined;
 
     return (
-      <div className="mb-3">
+      <div
+        className={["comment-form", "mb-3", this.props.containerClass].join(
+          " "
+        )}
+      >
         {UserService.Instance.myUserInfo ? (
           <MarkdownTextArea
             initialContent={initialContent}
@@ -58,7 +63,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
           />
         ) : (
           <div className="alert alert-warning" role="alert">
-            <Icon icon="alert-triangle" classes="icon-inline mr-2" />
+            <Icon icon="alert-triangle" classes="icon-inline me-2" />
             <T i18nKey="must_login" class="d-inline">
               #
               <Link className="alert-link" to="/login">

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

@@ -1,3 +1,11 @@
+import {
+  amCommunityCreator,
+  canAdmin,
+  canMod,
+  isAdmin,
+  isBanned,
+  isMod,
+} from "@utils/roles";
 import classNames from "classnames";
 import { Component, InfernoNode, linkEvent } from "inferno";
 import { Link } from "inferno-router";
@@ -40,16 +48,10 @@ import {
 } from "../../interfaces";
 import { UserService } from "../../services";
 import {
-  amCommunityCreator,
-  canAdmin,
-  canMod,
   colorList,
   commentTreeMaxDepth,
   futureDaysToUnixTime,
   getCommentParentId,
-  isAdmin,
-  isBanned,
-  isMod,
   mdToHtml,
   mdToHtmlNoImages,
   myAuth,
@@ -282,7 +284,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
     return (
       <li className="comment" role="comment">
-        <div
+        <article
           id={`comment-${cv.comment.id}`}
           className={classNames(`details comment-node py-2`, {
             "border-top border-light": !this.props.noBorder,
@@ -291,12 +293,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
         >
           <div
             className={classNames({
-              "ml-2": !this.props.noIndent,
+              "ms-2": !this.props.noIndent,
             })}
           >
             <div className="d-flex flex-wrap align-items-center text-muted small">
               <button
-                className="btn btn-sm text-muted mr-2"
+                className="btn btn-sm text-muted me-2"
                 onClick={linkEvent(this, this.handleCommentCollapse)}
                 aria-label={this.expandText}
                 data-tippy-content={this.expandText}
@@ -306,29 +308,29 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   classes="icon-inline"
                 />
               </button>
-              <span className="mr-2">
+              <span className="me-2">
                 <PersonListing person={cv.creator} />
               </span>
               {cv.comment.distinguished && (
-                <Icon icon="shield" inline classes={`text-danger mr-2`} />
+                <Icon icon="shield" inline classes={`text-danger me-2`} />
               )}
               {this.isPostCreator && (
-                <div className="badge badge-light d-none d-sm-inline mr-2">
+                <div className="badge text-bg-light d-none d-sm-inline me-2">
                   {i18n.t("creator")}
                 </div>
               )}
               {isMod_ && (
-                <div className="badge d-none d-sm-inline mr-2">
+                <div className="badge text-bg-light d-none d-sm-inline me-2">
                   {i18n.t("mod")}
                 </div>
               )}
               {isAdmin_ && (
-                <div className="badge d-none d-sm-inline mr-2">
+                <div className="badge text-bg-light d-none d-sm-inline me-2">
                   {i18n.t("admin")}
                 </div>
               )}
               {cv.creator.bot_account && (
-                <div className="badge d-none d-sm-inline mr-2">
+                <div className="badge text-bg-light d-none d-sm-inline me-2">
                   {i18n.t("bot_account").toLowerCase()}
                 </div>
               )}
@@ -337,14 +339,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   <span className="mx-1">{i18n.t("to")}</span>
                   <CommunityLink community={cv.community} />
                   <span className="mx-2">•</span>
-                  <Link className="mr-2" to={`/post/${cv.post.id}`}>
+                  <Link className="me-2" to={`/post/${cv.post.id}`}>
                     {cv.post.name}
                   </Link>
                 </>
               )}
               {this.linkBtn(true)}
               {cv.comment.language_id !== 0 && (
-                <span className="badge d-none d-sm-inline mr-2">
+                <span className="badge text-bg-light d-none d-sm-inline me-2">
                   {
                     this.props.allLanguages.find(
                       lang => lang.id === cv.comment.language_id
@@ -353,7 +355,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 </span>
               )}
               {/* This is an expanding spacer for mobile */}
-              <div className="mr-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
+              <div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
               {showScores() && (
                 <>
                   <a
@@ -365,7 +367,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       <Spinner />
                     ) : (
                       <span
-                        className="mr-1 font-weight-bold"
+                        className="me-1 font-weight-bold"
                         aria-label={i18n.t("number_of_points", {
                           count: Number(this.commentView.counts.score),
                           formattedCount: numToSI(
@@ -377,7 +379,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       </span>
                     )}
                   </a>
-                  <span className="mr-1">•</span>
+                  <span className="me-1">•</span>
                 </>
               )}
               <span>
@@ -400,6 +402,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 focus
                 allLanguages={this.props.allLanguages}
                 siteLanguages={this.props.siteLanguages}
+                containerClass="comment-comment-container"
                 onUpsertComment={this.props.onEditComment}
               />
             )}
@@ -467,7 +470,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                             {showScores() &&
                               this.commentView.counts.upvotes !==
                                 this.commentView.counts.score && (
-                                <span className="ml-1">
+                                <span className="ms-1">
                                   {numToSI(this.commentView.counts.upvotes)}
                                 </span>
                               )}
@@ -494,7 +497,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               {showScores() &&
                                 this.commentView.counts.upvotes !==
                                   this.commentView.counts.score && (
-                                  <span className="ml-1">
+                                  <span className="ms-1">
                                     {numToSI(this.commentView.counts.downvotes)}
                                   </span>
                                 )}
@@ -512,7 +515,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       </button>
                       {!this.state.showAdvanced ? (
                         <button
-                          className="btn btn-link btn-animate text-muted"
+                          className="btn btn-link btn-animate text-muted btn-more"
                           onClick={linkEvent(this, this.handleShowAdvanced)}
                           data-tippy-content={i18n.t("more")}
                           aria-label={i18n.t("more")}
@@ -944,10 +947,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               </div>
             )}
           </div>
-        </div>
+        </article>
         {showMoreChildren && (
           <div
-            className={classNames("details ml-1 comment-node py-2", {
+            className={classNames("details ms-1 comment-node py-2", {
               "border-top border-light": !this.props.noBorder,
             })}
             style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
@@ -979,7 +982,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             onSubmit={linkEvent(this, this.handleRemoveComment)}
           >
             <label
-              className="sr-only"
+              className="visually-hidden"
               htmlFor={`mod-remove-reason-${cv.comment.id}`}
             >
               {i18n.t("reason")}
@@ -987,7 +990,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             <input
               type="text"
               id={`mod-remove-reason-${cv.comment.id}`}
-              className="form-control mr-2"
+              className="form-control me-2"
               placeholder={i18n.t("reason")}
               value={this.state.removeReason}
               onInput={linkEvent(this, this.handleModRemoveReasonChange)}
@@ -1007,7 +1010,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             onSubmit={linkEvent(this, this.handleReportComment)}
           >
             <label
-              className="sr-only"
+              className="visually-hidden"
               htmlFor={`report-reason-${cv.comment.id}`}
             >
               {i18n.t("reason")}
@@ -1016,7 +1019,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               type="text"
               required
               id={`report-reason-${cv.comment.id}`}
-              className="form-control mr-2"
+              className="form-control me-2"
               placeholder={i18n.t("reason")}
               value={this.state.reportReason}
               onInput={linkEvent(this, this.handleReportReasonChange)}
@@ -1032,7 +1035,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
         )}
         {this.state.showBanDialog && (
           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
-            <div className="form-group row col-12">
+            <div className="mb-3 row col-12">
               <label
                 className="col-form-label"
                 htmlFor={`mod-ban-reason-${cv.comment.id}`}
@@ -1042,7 +1045,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               <input
                 type="text"
                 id={`mod-ban-reason-${cv.comment.id}`}
-                className="form-control mr-2"
+                className="form-control me-2"
                 placeholder={i18n.t("reason")}
                 value={this.state.banReason}
                 onInput={linkEvent(this, this.handleModBanReasonChange)}
@@ -1056,12 +1059,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               <input
                 type="number"
                 id={`mod-ban-expires-${cv.comment.id}`}
-                className="form-control mr-2"
+                className="form-control me-2"
                 placeholder={i18n.t("number_of_days")}
                 value={this.state.banExpireDays}
                 onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
               />
-              <div className="form-group">
+              <div className="input-group mb-3">
                 <div className="form-check">
                   <input
                     className="form-check-input"
@@ -1081,11 +1084,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               </div>
             </div>
             {/* TODO hold off on expires until later */}
-            {/* <div class="form-group row"> */}
+            {/* <div class="mb-3 row"> */}
             {/*   <label class="col-form-label">Expires</label> */}
-            {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
+            {/*   <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
             {/* </div> */}
-            <div className="form-group row">
+            <div className="mb-3 row">
               <button
                 type="submit"
                 className="btn btn-secondary"
@@ -1106,7 +1109,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
         {this.state.showPurgeDialog && (
           <form onSubmit={linkEvent(this, this.handlePurgeBothSubmit)}>
             <PurgeWarning />
-            <label className="sr-only" htmlFor="purge-reason">
+            <label className="visually-hidden" htmlFor="purge-reason">
               {i18n.t("reason")}
             </label>
             <input
@@ -1117,7 +1120,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               value={this.state.purgeReason}
               onInput={linkEvent(this, this.handlePurgeReasonChange)}
             />
-            <div className="form-group row col-12">
+            <div className="mb-3 row col-12">
               {this.state.purgeLoading ? (
                 <Spinner />
               ) : (
@@ -1143,6 +1146,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             focus
             allLanguages={this.props.allLanguages}
             siteLanguages={this.props.siteLanguages}
+            containerClass="comment-comment-container"
             onUpsertComment={this.props.onCreateComment}
           />
         )}

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

@@ -70,7 +70,7 @@ export class CommentReport extends Component<
     };
 
     return (
-      <div>
+      <div className="comment-report">
         <CommentNode
           node={node}
           viewType={CommentViewType.Flat}

src/shared/components/common/badges.tsx

@@ -0,0 +1,128 @@
+import { Link } from "inferno-router";
+import {
+  CommunityAggregates,
+  CommunityId,
+  SiteAggregates,
+} from "lemmy-js-client";
+import { i18n } from "../../i18next";
+import { numToSI } from "../../utils";
+
+interface BadgesProps {
+  counts: CommunityAggregates | SiteAggregates;
+  communityId?: CommunityId;
+}
+
+const isCommunityAggregates = (
+  counts: CommunityAggregates | SiteAggregates
+): counts is CommunityAggregates => {
+  return "subscribers" in counts;
+};
+
+const isSiteAggregates = (
+  counts: CommunityAggregates | SiteAggregates
+): counts is SiteAggregates => {
+  return "communities" in counts;
+};
+
+export const Badges = ({ counts, communityId }: BadgesProps) => {
+  return (
+    <ul className="badges my-1 list-inline">
+      <li
+        className="list-inline-item badge text-bg-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_day", {
+          count: Number(counts.users_active_day),
+          formattedCount: numToSI(counts.users_active_day),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_day),
+          formattedCount: numToSI(counts.users_active_day),
+        })}{" "}
+        / {i18n.t("day")}
+      </li>
+      <li
+        className="list-inline-item badge text-bg-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_week", {
+          count: Number(counts.users_active_week),
+          formattedCount: numToSI(counts.users_active_week),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_week),
+          formattedCount: numToSI(counts.users_active_week),
+        })}{" "}
+        / {i18n.t("week")}
+      </li>
+      <li
+        className="list-inline-item badge text-bg-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_month", {
+          count: Number(counts.users_active_month),
+          formattedCount: numToSI(counts.users_active_month),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_month),
+          formattedCount: numToSI(counts.users_active_month),
+        })}{" "}
+        / {i18n.t("month")}
+      </li>
+      <li
+        className="list-inline-item badge text-bg-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
+          count: Number(counts.users_active_half_year),
+          formattedCount: numToSI(counts.users_active_half_year),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_half_year),
+          formattedCount: numToSI(counts.users_active_half_year),
+        })}{" "}
+        / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
+      </li>
+      {isSiteAggregates(counts) && (
+        <>
+          <li className="list-inline-item badge text-bg-secondary">
+            {i18n.t("number_of_users", {
+              count: Number(counts.users),
+              formattedCount: numToSI(counts.users),
+            })}
+          </li>
+          <li className="list-inline-item badge text-bg-secondary">
+            {i18n.t("number_of_communities", {
+              count: Number(counts.communities),
+              formattedCount: numToSI(counts.communities),
+            })}
+          </li>
+        </>
+      )}
+      {isCommunityAggregates(counts) && (
+        <li className="list-inline-item badge text-bg-secondary">
+          {i18n.t("number_of_subscribers", {
+            count: Number(counts.subscribers),
+            formattedCount: numToSI(counts.subscribers),
+          })}
+        </li>
+      )}
+      <li className="list-inline-item badge text-bg-secondary">
+        {i18n.t("number_of_posts", {
+          count: Number(counts.posts),
+          formattedCount: numToSI(counts.posts),
+        })}
+      </li>
+      <li className="list-inline-item badge text-bg-secondary">
+        {i18n.t("number_of_comments", {
+          count: Number(counts.comments),
+          formattedCount: numToSI(counts.comments),
+        })}
+      </li>
+      <li className="list-inline-item">
+        <Link
+          className="badge text-bg-primary"
+          to={`/modlog${communityId ? `/${communityId}` : ""}`}
+        >
+          {i18n.t("modlog")}
+        </Link>
+      </li>
+    </ul>
+  );
+};

src/shared/components/common/banner-icon-header.tsx

@@ -15,7 +15,8 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
     const banner = this.props.banner;
     const icon = this.props.icon;
     return (
-      <div className="position-relative mb-2">
+      (banner || icon) && (
+        <div className="banner-icon-header position-relative mb-2">
           {banner && <PictrsImage src={banner} banner alt="" />}
           {icon && (
             <PictrsImage
@@ -26,6 +27,7 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
             />
           )}
         </div>
+      )
     );
   }
 }

src/shared/components/common/comment-sort-select.tsx

@@ -40,7 +40,7 @@ export class CommentSortSelect extends Component<
           name={this.id}
           value={this.state.sort}
           onChange={linkEvent(this, this.handleSortChange)}
-          className="custom-select w-auto mr-2 mb-2"
+          className="sort-select form-select d-inline-block w-auto me-2 mb-2"
           aria-label={i18n.t("sort_type")}
         >
           <option disabled aria-hidden="true">
@@ -52,7 +52,7 @@ export class CommentSortSelect extends Component<
           <option value={"Old"}>{i18n.t("old")}</option>
         </select>
         <a
-          className="text-muted"
+          className="sort-select-help text-muted"
           href={sortingHelpUrl}
           rel={relTags}
           title={i18n.t("sorting_help")}

src/shared/components/common/data-type-select.tsx

@@ -31,7 +31,7 @@ export class DataTypeSelect extends Component<
 
   render() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="data-type-select btn-group btn-group-toggle flex-wrap">
         <label
           className={`pointer btn btn-outline-secondary 
             ${this.state.type_ == DataType.Post && "active"}
@@ -39,6 +39,7 @@ export class DataTypeSelect extends Component<
         >
           <input
             type="radio"
+            className="btn-check"
             value={DataType.Post}
             checked={this.state.type_ == DataType.Post}
             onChange={linkEvent(this, this.handleTypeChange)}
@@ -52,6 +53,7 @@ export class DataTypeSelect extends Component<
         >
           <input
             type="radio"
+            className="btn-check"
             value={DataType.Comment}
             checked={this.state.type_ == DataType.Comment}
             onChange={linkEvent(this, this.handleTypeChange)}

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

@@ -25,7 +25,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
   }
   render() {
     return (
-      <span>
+      <span className="emoji-picker">
         <button
           className="btn btn-sm text-muted"
           data-tippy-content={i18n.t("emoji")}

src/shared/components/common/icon.tsx

@@ -25,7 +25,7 @@ export class Icon extends Component<IconProps, any> {
         <use
           xlinkHref={`/static/assets/symbols.svg#icon-${this.props.icon}`}
         ></use>
-        <div className="sr-only">
+        <div className="visually-hidden">
           <title>{this.props.icon}</title>
         </div>
       </svg>
@@ -59,8 +59,8 @@ export class PurgeWarning extends Component<any, any> {
 
   render() {
     return (
-      <div className="mt-2 alert alert-danger" role="alert">
+      <div className="purge-warning mt-2 alert alert-danger" role="alert">
-        <Icon icon="alert-triangle" classes="icon-inline mr-2" />
+        <Icon icon="alert-triangle" classes="icon-inline me-2" />
         {i18n.t("purge_warning")}
       </div>
     );

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

@@ -32,7 +32,7 @@ export class ImageUploadForm extends Component<
 
   render() {
     return (
-      <form className="d-inline">
+      <form className="image-upload-form d-inline">
         <label
           htmlFor={this.id}
           className="pointer text-muted small font-weight-bold"

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

@@ -49,13 +49,13 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
     return this.props.iconVersion ? (
       this.selectBtn
     ) : (
-      <div>
+      <div className="language-select">
         {this.props.multiple && this.props.showLanguageWarning && (
           <div className="alert alert-warning" role="alert">
             {i18n.t("undetermined_language_warning")}
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label
             className={classNames(
               "col-form-label",
@@ -73,14 +73,12 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
           >
             {this.selectBtn}
             {this.props.multiple && (
-              <div className="input-group-append">
               <button
-                  className="input-group-text"
+                className="btn btn-outline-secondary"
                 onClick={linkEvent(this, this.handleDeselectAll)}
               >
                 <Icon icon="x" />
               </button>
-              </div>
             )}
           </div>
         </div>
@@ -100,12 +98,9 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
 
     return (
       <select
-        className={classNames(
+        className={classNames("form-select w-auto", {
-          "lang-select-action",
+          "d-inline-block": !this.props.iconVersion,
-          this.props.iconVersion
+        })}
-            ? "btn btn-sm text-muted"
-            : "form-control custom-select"
-        )}
         id={this.id}
         onChange={linkEvent(this, this.handleLanguageChange)}
         aria-label={i18n.t("language_select_placeholder")}

src/shared/components/common/listing-type-select.tsx

@@ -39,7 +39,7 @@ export class ListingTypeSelect extends Component<
 
   render() {
     return (
-      <div className="btn-group btn-group-toggle flex-wrap mb-2">
+      <div className="listing-type-select btn-group btn-group-toggle flex-wrap">
         {this.props.showSubscribed && (
           <label
             title={i18n.t("subscribed_description")}
@@ -51,6 +51,7 @@ export class ListingTypeSelect extends Component<
             <input
               id={`${this.id}-subscribed`}
               type="radio"
+              className="btn-check"
               value={"Subscribed"}
               checked={this.state.type_ == "Subscribed"}
               onChange={linkEvent(this, this.handleTypeChange)}
@@ -69,6 +70,7 @@ export class ListingTypeSelect extends Component<
             <input
               id={`${this.id}-local`}
               type="radio"
+              className="btn-check"
               value={"Local"}
               checked={this.state.type_ == "Local"}
               onChange={linkEvent(this, this.handleTypeChange)}
@@ -86,6 +88,7 @@ export class ListingTypeSelect extends Component<
           <input
             id={`${this.id}-all`}
             type="radio"
+            className="btn-check"
             value={"All"}
             checked={this.state.type_ == "All"}
             onChange={linkEvent(this, this.handleTypeChange)}

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

@@ -1,4 +1,6 @@
+import { isBrowser } from "@utils/browser";
 import autosize from "autosize";
+import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { Language } from "lemmy-js-client";
@@ -7,7 +9,6 @@ import { HttpService, UserService } from "../../services";
 import {
   concurrentImageUpload,
   customEmojisLookup,
-  isBrowser,
   markdownFieldCharacterLimit,
   markdownHelpUrl,
   maxUploadImages,
@@ -63,8 +64,9 @@ export class MarkdownTextArea extends Component<
   MarkdownTextAreaProps,
   MarkdownTextAreaState
 > {
-  private id = `comment-textarea-${randomStr()}`;
+  private id = `markdown-textarea-${randomStr()}`;
-  private formId = `comment-form-${randomStr()}`;
+  private formId = `markdown-form-${randomStr()}`;
+
   private tribute: any;
 
   state: MarkdownTextAreaState = {
@@ -134,7 +136,11 @@ export class MarkdownTextArea extends Component<
     //   message={i18n.t("block_leaving")}
     // />
     return (
-      <form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
+      <form
+        className="markdown-textarea"
+        id={this.formId}
+        onSubmit={linkEvent(this, this.handleSubmit)}
+      >
         <NavigationPrompt
           when={
             !this.props.hideNavigationWarnings &&
@@ -142,48 +148,10 @@ export class MarkdownTextArea extends Component<
             !this.state.submitted
           }
         />
-        <div className="form-group row">
+        <div className="mb-3 row">
-          <div className={`col-sm-12`}>
+          <div className="col-12">
-            <textarea
+            <div className="rounded bg-light border">
-              id={this.id}
+              <div className="d-flex flex-wrap border-bottom">
-              className={`form-control ${this.state.previewMode && "d-none"}`}
-              value={this.state.content}
-              onInput={linkEvent(this, this.handleContentChange)}
-              onPaste={linkEvent(this, this.handleImageUploadPaste)}
-              onKeyDown={linkEvent(this, this.handleKeyBinds)}
-              required
-              disabled={this.isDisabled}
-              rows={2}
-              maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
-              placeholder={this.props.placeholder}
-            />
-            {this.state.previewMode && this.state.content && (
-              <div
-                className="card border-secondary card-body md-div"
-                dangerouslySetInnerHTML={mdToHtml(this.state.content)}
-              />
-            )}
-            {this.state.imageUploadStatus &&
-              this.state.imageUploadStatus.total > 1 && (
-                <ProgressBar
-                  className="mt-2"
-                  striped
-                  animated
-                  value={this.state.imageUploadStatus.uploaded}
-                  max={this.state.imageUploadStatus.total}
-                  text={i18n.t("pictures_uploded_progess", {
-                    uploaded: this.state.imageUploadStatus.uploaded,
-                    total: this.state.imageUploadStatus.total,
-                  })}
-                />
-              )}
-          </div>
-          <label className="sr-only" htmlFor={this.id}>
-            {i18n.t("body")}
-          </label>
-        </div>
-        <div className="row">
-          <div className="col-sm-12 d-flex flex-wrap">
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}
                 {this.getFormatButton("link", this.handleInsertLink)}
@@ -212,7 +180,9 @@ export class MarkdownTextArea extends Component<
                     name="file"
                     className="d-none"
                     multiple
-                disabled={!UserService.Instance.myUserInfo || this.isDisabled}
+                    disabled={
+                      !UserService.Instance.myUserInfo || this.isDisabled
+                    }
                     onChange={linkEvent(this, this.handleImageUpload)}
                   />
                 </form>
@@ -225,7 +195,10 @@ export class MarkdownTextArea extends Component<
                 {this.getFormatButton("list", this.handleInsertList)}
                 {this.getFormatButton("code", this.handleInsertCode)}
                 {this.getFormatButton("subscript", this.handleInsertSubscript)}
-            {this.getFormatButton("superscript", this.handleInsertSuperscript)}
+                {this.getFormatButton(
+                  "superscript",
+                  this.handleInsertSuperscript
+                )}
                 {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
                 <a
                   href={markdownHelpUrl}
@@ -237,7 +210,55 @@ export class MarkdownTextArea extends Component<
                 </a>
               </div>
 
-          <div className="col-sm-12 d-flex align-items-center flex-wrap">
+              <div>
+                <textarea
+                  id={this.id}
+                  className={classNames(
+                    "form-control border-0 rounded-top-0 rounded-bottom",
+                    {
+                      "d-none": this.state.previewMode,
+                    }
+                  )}
+                  value={this.state.content}
+                  onInput={linkEvent(this, this.handleContentChange)}
+                  onPaste={linkEvent(this, this.handleImageUploadPaste)}
+                  onKeyDown={linkEvent(this, this.handleKeyBinds)}
+                  required
+                  disabled={this.isDisabled}
+                  rows={2}
+                  maxLength={
+                    this.props.maxLength ?? markdownFieldCharacterLimit
+                  }
+                  placeholder={this.props.placeholder}
+                />
+                {this.state.previewMode && this.state.content && (
+                  <div
+                    className="card border-secondary card-body md-div"
+                    dangerouslySetInnerHTML={mdToHtml(this.state.content)}
+                  />
+                )}
+                {this.state.imageUploadStatus &&
+                  this.state.imageUploadStatus.total > 1 && (
+                    <ProgressBar
+                      className="mt-2"
+                      striped
+                      animated
+                      value={this.state.imageUploadStatus.uploaded}
+                      max={this.state.imageUploadStatus.total}
+                      text={i18n.t("pictures_uploded_progess", {
+                        uploaded: this.state.imageUploadStatus.uploaded,
+                        total: this.state.imageUploadStatus.total,
+                      })}
+                    />
+                  )}
+              </div>
+              <label className="visually-hidden" htmlFor={this.id}>
+                {i18n.t("body")}
+              </label>
+            </div>
+          </div>
+
+          <div className="col-12 d-flex align-items-center flex-wrap mt-2">
             {this.props.showLanguage && (
               <LanguageSelect
                 iconVersion
@@ -257,7 +278,7 @@ export class MarkdownTextArea extends Component<
             {this.props.buttonTitle && (
               <button
                 type="submit"
-                className="btn btn-sm btn-secondary mr-2"
+                className="btn btn-sm btn-secondary ms-2"
                 disabled={this.isDisabled}
               >
                 {this.state.loading ? (
@@ -270,7 +291,7 @@ export class MarkdownTextArea extends Component<
             {this.props.replyType && (
               <button
                 type="button"
-                className="btn btn-sm btn-secondary mr-2"
+                className="btn btn-sm btn-secondary ms-2"
                 onClick={linkEvent(this, this.handleReplyCancel)}
               >
                 {i18n.t("cancel")}
@@ -278,7 +299,7 @@ export class MarkdownTextArea extends Component<
             )}
             {this.state.content && (
               <button
-                className={`btn btn-sm btn-secondary mr-2 ${
+                className={`btn btn-sm btn-secondary ms-2 ${
                   this.state.previewMode && "active"
                 }`}
                 onClick={linkEvent(this, this.handlePreviewToggle)}

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

@@ -36,9 +36,9 @@ export class MomentTime extends Component<MomentTimeProps, any> {
       return (
         <span
           data-tippy-content={this.createdAndModifiedTimes()}
-          className="font-italics pointer unselectable"
+          className="moment-time font-italics pointer unselectable"
         >
-          <Icon icon="edit-2" classes="icon-inline mr-1" />
+          <Icon icon="edit-2" classes="icon-inline me-1" />
           {moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
         </span>
       );
@@ -46,7 +46,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
       const published = this.props.published;
       return (
         <span
-          className="pointer unselectable"
+          className="moment-time pointer unselectable"
           data-tippy-content={this.format(published)}
         >
           {moment.utc(published).fromNow(!this.props.showAgo)}

src/shared/components/common/paginator.tsx

@@ -12,9 +12,9 @@ export class Paginator extends Component<PaginatorProps, any> {
   }
   render() {
     return (
-      <div className="my-2">
+      <div className="paginator my-2">
         <button
-          className="btn btn-secondary mr-2"
+          className="btn btn-secondary me-2"
           disabled={this.props.page == 1}
           onClick={linkEvent(this, this.handlePrev)}
         >

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

@@ -22,7 +22,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
 
   render() {
     return (
-      <picture>
+      <picture className="pictrs-image d-inline-block overflow-hidden">
         <source srcSet={this.src("webp")} type="image/webp" />
         <source srcSet={this.props.src} />
         <source srcSet={this.src("jpg")} type="image/jpeg" />
@@ -39,8 +39,8 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,
-            "rounded-circle img-cover img-icon mr-2": this.props.icon,
+            "rounded-circle img-cover img-icon me-2": this.props.icon,
-            "ml-2 mb-0 rounded-circle img-cover avatar-overlay":
+            "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
               this.props.iconOverlay,
             "avatar-pushup": this.props.pushup,
           })}

src/shared/components/common/registration-application.tsx

@@ -58,7 +58,7 @@ export class RegistrationApplication extends Component<
     const accepted = a.creator_local_user.accepted_application;
 
     return (
-      <div>
+      <div className="registration-application">
         <div>
           {i18n.t("applicant")}: <PersonListing person={a.creator} />
         </div>
@@ -96,7 +96,7 @@ export class RegistrationApplication extends Component<
         )}
 
         {this.state.denyExpanded && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-sm-2 col-form-label">
               {i18n.t("deny_reason")}
             </label>
@@ -113,7 +113,7 @@ export class RegistrationApplication extends Component<
         )}
         {(!ra.admin_id || (ra.admin_id && !accepted)) && (
           <button
-            className="btn btn-secondary mr-2 my-2"
+            className="btn btn-secondary me-2 my-2"
             onClick={linkEvent(this, this.handleApprove)}
             aria-label={i18n.t("approve")}
           >
@@ -122,7 +122,7 @@ export class RegistrationApplication extends Component<
         )}
         {(!ra.admin_id || (ra.admin_id && accepted)) && (
           <button
-            className="btn btn-secondary mr-2"
+            className="btn btn-secondary me-2"
             onClick={linkEvent(this, this.handleDeny)}
             aria-label={i18n.t("deny")}
           >

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

@@ -102,11 +102,11 @@ export class SearchableSelect extends Component<
     const { searchText, selectedIndex, loadingEllipses } = this.state;
 
     return (
-      <div className="dropdown">
+      <div className="searchable-select dropdown">
         <button
           id={id}
           type="button"
-          className="custom-select text-start"
+          className="form-select d-inline-block text-start"
           aria-haspopup="listbox"
           data-bs-toggle="dropdown"
           onClick={linkEvent(this, focusSearch)}

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

@@ -39,7 +39,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           name={this.id}
           value={this.state.sort}
           onChange={linkEvent(this, this.handleSortChange)}
-          className="custom-select w-auto mr-2 mb-2"
+          className="sort-select form-select d-inline-block w-auto me-2"
           aria-label={i18n.t("sort_type")}
         >
           <option disabled aria-hidden="true">
@@ -73,7 +73,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           <option value={"TopAll"}>{i18n.t("top_all")}</option>
         </select>
         <a
-          className="text-muted"
+          className="sort-select-icon text-muted"
           href={sortingHelpUrl}
           rel={relTags}
           title={i18n.t("sorting_help")}

src/shared/components/community/communities.tsx

@@ -1,3 +1,5 @@
+import { getQueryParams, getQueryString } from "@utils/helpers";
+import type { QueryParams } from "@utils/types";
 import { Component, linkEvent } from "inferno";
 import {
   CommunityResponse,
@@ -11,11 +13,9 @@ import { InitialFetchRequest } from "../../interfaces";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
-  QueryParams,
+  RouteDataResponse,
   editCommunity,
   getPageFromString,
-  getQueryParams,
-  getQueryString,
   myAuth,
   myAuthRequired,
   numToSI,
@@ -30,6 +30,10 @@ import { CommunityLink } from "./community-link";
 
 const communityLimit = 50;
 
+type CommunitiesData = RouteDataResponse<{
+  listCommunitiesResponse: ListCommunitiesResponse;
+}>;
+
 interface CommunitiesState {
   listCommunitiesResponse: RequestState<ListCommunitiesResponse>;
   siteRes: GetSiteResponse;
@@ -47,7 +51,7 @@ function getListingTypeFromQuery(listingType?: string): ListingType {
 }
 
 export class Communities extends Component<any, CommunitiesState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<CommunitiesData>(this.context);
   state: CommunitiesState = {
     listCommunitiesResponse: { state: "empty" },
     siteRes: this.isoData.site_res,
@@ -62,9 +66,11 @@ export class Communities extends Component<any, CommunitiesState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
+      const { listCommunitiesResponse } = this.isoData.routeData;
+
       this.state = {
         ...this.state,
-        listCommunitiesResponse: this.isoData.routeData[0],
+        listCommunitiesResponse,
         isIsomorphic: true,
       };
     }
@@ -106,9 +112,7 @@ export class Communities extends Component<any, CommunitiesState> {
                   />
                 </span>
               </div>
-              <div className="col-md-6">
+              <div className="col-md-6">{this.searchForm()}</div>
-                <div className="float-md-right">{this.searchForm()}</div>
-              </div>
             </div>
 
             <div className="table-responsive">
@@ -203,7 +207,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="communities container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -216,25 +220,29 @@ export class Communities extends Component<any, CommunitiesState> {
   searchForm() {
     return (
       <form
-        className="form-inline"
+        className="row justify-content-end"
         onSubmit={linkEvent(this, this.handleSearchSubmit)}
       >
+        <div className="col-auto">
           <input
             type="text"
             id="communities-search"
-          className="form-control mr-2 mb-2"
+            className="form-control me-2 mb-2"
             value={this.state.searchText}
             placeholder={`${i18n.t("search")}...`}
             onInput={linkEvent(this, this.handleSearchChange)}
             required
             minLength={3}
           />
-        <label className="sr-only" htmlFor="communities-search">
+        </div>
+        <div className="col-auto">
+          <label className="visually-hidden" htmlFor="communities-search">
             {i18n.t("search")}
           </label>
-        <button type="submit" className="btn btn-secondary mr-2 mb-2">
+          <button type="submit" className="btn btn-secondary mb-2">
             <span>{i18n.t("search")}</span>
           </button>
+        </div>
       </form>
     );
   }
@@ -274,13 +282,13 @@ export class Communities extends Component<any, CommunitiesState> {
     i.context.router.history.push(`/search?q=${searchParamEncoded}`);
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     query: { listingType, page },
     client,
     auth,
-  }: InitialFetchRequest<QueryParams<CommunitiesProps>>): Promise<
+  }: InitialFetchRequest<
-    RequestState<any>
+    QueryParams<CommunitiesProps>
-  >[] {
+  >): Promise<CommunitiesData> {
     const listCommunitiesForm: ListCommunities = {
       type_: getListingTypeFromQuery(listingType),
       sort: "TopMonth",
@@ -289,7 +297,11 @@ export class Communities extends Component<any, CommunitiesState> {
       auth: auth,
     };
 
-    return [client.listCommunities(listCommunitiesForm)];
+    return {
+      listCommunitiesResponse: await client.listCommunities(
+        listCommunitiesForm
+      ),
+    };
   }
 
   getCommunitiesQueryParams() {

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

@@ -85,7 +85,10 @@ export class CommunityForm extends Component<
 
   render() {
     return (
-      <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
+      <form
+        className="community-form"
+        onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
+      >
         <NavigationPrompt
           when={
             !this.props.loading &&
@@ -98,14 +101,14 @@ export class CommunityForm extends Component<
           }
         />
         {!this.props.community_view && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label
               className="col-12 col-sm-2 col-form-label"
               htmlFor="community-name"
             >
               {i18n.t("name")}
               <span
-                className="position-absolute pointer unselectable ml-2 text-muted"
+                className="position-absolute pointer unselectable ms-2 text-muted"
                 data-tippy-content={i18n.t("name_explain")}
               >
                 <Icon icon="help-circle" classes="icon-inline" />
@@ -126,14 +129,14 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label
             className="col-12 col-sm-2 col-form-label"
             htmlFor="community-title"
           >
             {i18n.t("display_name")}
             <span
-              className="position-absolute pointer unselectable ml-2 text-muted"
+              className="position-absolute pointer unselectable ms-2 text-muted"
               data-tippy-content={i18n.t("display_name_explain")}
             >
               <Icon icon="help-circle" classes="icon-inline" />
@@ -152,8 +155,10 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
-          <label className="col-12 col-sm-2">{i18n.t("icon")}</label>
+          <label className="col-12 col-sm-2 col-form-label">
+            {i18n.t("icon")}
+          </label>
           <div className="col-12 col-sm-10">
             <ImageUploadForm
               uploadTitle={i18n.t("upload_icon")}
@@ -164,8 +169,10 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
-          <label className="col-12 col-sm-2">{i18n.t("banner")}</label>
+          <label className="col-12 col-sm-2 col-form-label">
+            {i18n.t("banner")}
+          </label>
           <div className="col-12 col-sm-10">
             <ImageUploadForm
               uploadTitle={i18n.t("upload_banner")}
@@ -175,7 +182,7 @@ export class CommunityForm extends Component<
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
             {i18n.t("sidebar")}
           </label>
@@ -192,7 +199,7 @@ export class CommunityForm extends Component<
         </div>
 
         {this.props.enableNsfw && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <legend className="col-form-label col-sm-2 pt-0">
               {i18n.t("nsfw")}
             </legend>
@@ -209,7 +216,7 @@ export class CommunityForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <legend className="col-form-label col-6 pt-0">
             {i18n.t("only_mods_can_post_in_community")}
           </legend>
@@ -236,11 +243,11 @@ export class CommunityForm extends Component<
           multiple={true}
           onChange={this.handleDiscussionLanguageChange}
         />
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <button
               type="submit"
-              className="btn btn-secondary mr-2"
+              className="btn btn-secondary me-2"
               disabled={this.props.loading}
             >
               {this.props.loading ? (

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

@@ -37,7 +37,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
     return !this.props.realLink ? (
       <Link
         title={apubName}
-        className={`${this.props.muted ? "text-muted" : ""}`}
+        className={`community-link ${this.props.muted ? "text-muted" : ""}`}
         to={link}
       >
         {this.avatarAndName(displayName)}
@@ -45,7 +45,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
     ) : (
       <a
         title={apubName}
-        className={`${this.props.muted ? "text-muted" : ""}`}
+        className={`community-link ${this.props.muted ? "text-muted" : ""}`}
         href={link}
         rel={relTags}
       >

src/shared/components/community/community.tsx

@@ -1,3 +1,5 @@
+import { getQueryParams, getQueryString } from "@utils/helpers";
+import type { QueryParams } from "@utils/types";
 import { Component, linkEvent } from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
@@ -62,7 +64,7 @@ import { UserService } from "../../services";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
-  QueryParams,
+  RouteDataResponse,
   commentsToFlatNodes,
   communityRSSUrl,
   editComment,
@@ -74,8 +76,6 @@ import {
   getCommentParentId,
   getDataTypeString,
   getPageFromString,
-  getQueryParams,
-  getQueryString,
   myAuth,
   postToCommentSortType,
   relTags,
@@ -100,6 +100,12 @@ import { SiteSidebar } from "../home/site-sidebar";
 import { PostListings } from "../post/post-listings";
 import { CommunityLink } from "./community-link";
 
+type CommunityData = RouteDataResponse<{
+  communityRes: GetCommunityResponse;
+  postsRes: GetPostsResponse;
+  commentsRes: GetCommentsResponse;
+}>;
+
 interface State {
   communityRes: RequestState<GetCommunityResponse>;
   postsRes: RequestState<GetPostsResponse>;
@@ -140,7 +146,7 @@ export class Community extends Component<
   RouteComponentProps<{ name: string }>,
   State
 > {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<CommunityData>(this.context);
   state: State = {
     communityRes: { state: "empty" },
     postsRes: { state: "empty" },
@@ -194,13 +200,14 @@ export class Community extends Component<
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [communityRes, postsRes, commentsRes] = this.isoData.routeData;
+      const { communityRes, commentsRes, postsRes } = this.isoData.routeData;
+
       this.state = {
         ...this.state,
+        isIsomorphic: true,
+        commentsRes,
         communityRes,
         postsRes,
-        commentsRes,
-        isIsomorphic: true,
       };
     }
   }
@@ -227,23 +234,21 @@ export class Community extends Component<
     saveScrollPosition(this.context);
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     path,
     query: { dataType: urlDataType, page: urlPage, sort: urlSort },
     auth,
   }: InitialFetchRequest<QueryParams<CommunityProps>>): Promise<
-    RequestState<any>
+    Promise<CommunityData>
-  >[] {
+  > {
     const pathSplit = path.split("/");
-    const promises: Promise<RequestState<any>>[] = [];
 
     const communityName = pathSplit[2];
     const communityForm: GetCommunity = {
       name: communityName,
       auth,
     };
-    promises.push(client.getCommunity(communityForm));
 
     const dataType = getDataTypeFromQuery(urlDataType);
 
@@ -251,6 +256,11 @@ export class Community extends Component<
 
     const page = getPageFromString(urlPage);
 
+    let postsResponse: RequestState<GetPostsResponse> = { state: "empty" };
+    let commentsResponse: RequestState<GetCommentsResponse> = {
+      state: "empty",
+    };
+
     if (dataType === DataType.Post) {
       const getPostsForm: GetPosts = {
         community_name: communityName,
@@ -261,8 +271,8 @@ export class Community extends Component<
         saved_only: false,
         auth,
       };
-      promises.push(client.getPosts(getPostsForm));
+
-      promises.push(Promise.resolve({ state: "empty" }));
+      postsResponse = await client.getPosts(getPostsForm);
     } else {
       const getCommentsForm: GetComments = {
         community_name: communityName,
@@ -273,11 +283,15 @@ export class Community extends Component<
         saved_only: false,
         auth,
       };
-      promises.push(Promise.resolve({ state: "empty" }));
+
-      promises.push(client.getComments(getCommentsForm));
+      commentsResponse = await client.getComments(getCommentsForm);
     }
 
-    return promises;
+    return {
+      communityRes: await client.getCommunity(communityForm),
+      commentsRes: commentsResponse,
+      postsRes: postsResponse,
+    };
   }
 
   get documentTitle(): string {
@@ -313,7 +327,7 @@ export class Community extends Component<
                 {this.communityInfo(res)}
                 <div className="d-block d-md-none">
                   <button
-                    className="btn btn-secondary d-inline-block mb-2 mr-3"
+                    className="btn btn-secondary d-inline-block mb-2 me-3"
                     onClick={linkEvent(this, this.handleShowSidebarMobile)}
                   >
                     {i18n.t("sidebar")}{" "}
@@ -343,7 +357,9 @@ export class Community extends Component<
   }
 
   render() {
-    return <div className="container-lg">{this.renderCommunity()}</div>;
+    return (
+      <div className="community container-lg">{this.renderCommunity()}</div>
+    );
   }
 
   sidebar(res: GetCommunityResponse) {
@@ -360,7 +376,6 @@ export class Community extends Component<
           community_view={res.community_view}
           moderators={res.moderators}
           admins={site_res.admins}
-          online={res.online}
           enableNsfw={enableNsfw(site_res)}
           editable
           allLanguages={site_res.all_languages}
@@ -497,13 +512,13 @@ export class Community extends Component<
 
     return (
       <div className="mb-3">
-        <span className="mr-3">
+        <span className="me-3">
           <DataTypeSelect
             type_={dataType}
             onChange={this.handleDataTypeChange}
           />
         </span>
-        <span className="mr-2">
+        <span className="me-2">
           <SortSelect sort={sort} onChange={this.handleSortChange} />
         </span>
         {communityRss && (
@@ -647,6 +662,12 @@ export class Community extends Component<
     const blockCommunityRes = await HttpService.client.blockCommunity(form);
     if (blockCommunityRes.state == "success") {
       updateCommunityBlock(blockCommunityRes.data);
+      this.setState(s => {
+        if (s.communityRes.state == "success") {
+          s.communityRes.data.community_view.blocked =
+            blockCommunityRes.data.blocked;
+        }
+      });
     }
   }
 

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

@@ -33,7 +33,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="create-community container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

src/shared/components/community/sidebar.tsx

@@ -1,3 +1,4 @@
+import { amAdmin, amMod, amTopMod } from "@utils/roles";
 import { Component, InfernoNode, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
@@ -16,16 +17,8 @@ import {
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { UserService } from "../../services";
-import {
+import { getUnixTime, hostname, mdToHtml, myAuthRequired } from "../../utils";
-  amAdmin,
+import { Badges } from "../common/badges";
-  amMod,
-  amTopMod,
-  getUnixTime,
-  hostname,
-  mdToHtml,
-  myAuthRequired,
-  numToSI,
-} from "../../utils";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { CommunityForm } from "../community/community-form";
@@ -39,7 +32,6 @@ interface SidebarProps {
   allLanguages: Language[];
   siteLanguages: number[];
   communityLanguages?: number[];
-  online: number;
   enableNsfw?: boolean;
   showIcon?: boolean;
   editable?: boolean;
@@ -64,7 +56,6 @@ interface SidebarState {
   removeCommunityLoading: boolean;
   leaveModTeamLoading: boolean;
   followCommunityLoading: boolean;
-  blockCommunityLoading: boolean;
   purgeCommunityLoading: boolean;
 }
 
@@ -78,7 +69,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     removeCommunityLoading: false,
     leaveModTeamLoading: false,
     followCommunityLoading: false,
-    blockCommunityLoading: false,
     purgeCommunityLoading: false,
   };
 
@@ -105,7 +95,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         removeCommunityLoading: false,
         leaveModTeamLoading: false,
         followCommunityLoading: false,
-        blockCommunityLoading: false,
         purgeCommunityLoading: false,
       });
     }
@@ -113,7 +102,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   render() {
     return (
-      <div>
+      <div className="community-sidebar">
         {!this.state.showEdit ? (
           this.sidebar()
         ) : (
@@ -135,8 +124,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const myUSerInfo = UserService.Instance.myUserInfo;
     const { name, actor_id } = this.props.community_view.community;
     return (
-      <div>
+      <aside className="mb-3">
-        <div className="card border-secondary mb-3">
+        <div id="sidebarContainer">
+          <section id="sidebarMain" className="card border-secondary mb-3">
             <div className="card-body">
               {this.communityTitle()}
               {this.props.editable && this.adminButtons()}
@@ -157,15 +147,19 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
                 </div>
               )}
             </div>
-        </div>
+          </section>
-        <div className="card border-secondary mb-3">
+          <section id="sidebarInfo" className="card border-secondary mb-3">
             <div className="card-body">
               {this.description()}
-            {this.badges()}
+              <Badges
+                communityId={this.props.community_view.community.id}
+                counts={this.props.community_view.counts}
+              />
               {this.mods()}
             </div>
+          </section>
         </div>
-      </div>
+      </aside>
     );
   }
 
@@ -178,19 +172,19 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           {this.props.showIcon && !community.removed && (
             <BannerIconHeader icon={community.icon} banner={community.banner} />
           )}
-          <span className="mr-2">
+          <span className="me-2">
             <CommunityLink community={community} hideAvatar />
           </span>
           {subscribed === "Subscribed" && (
             <button
-              className="btn btn-secondary btn-sm mr-2"
+              className="btn btn-secondary btn-sm me-2"
               onClick={linkEvent(this, this.handleUnfollowCommunity)}
             >
               {this.state.followCommunityLoading ? (
                 <Spinner />
               ) : (
                 <>
-                  <Icon icon="check" classes="icon-inline text-success mr-1" />
+                  <Icon icon="check" classes="icon-inline text-success me-1" />
                   {i18n.t("joined")}
                 </>
               )}
@@ -198,7 +192,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           )}
           {subscribed === "Pending" && (
             <button
-              className="btn btn-warning mr-2"
+              className="btn btn-warning me-2"
               onClick={linkEvent(this, this.handleUnfollowCommunity)}
             >
               {this.state.followCommunityLoading ? (
@@ -209,17 +203,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             </button>
           )}
           {community.removed && (
-            <small className="mr-2 text-muted font-italic">
+            <small className="me-2 text-muted font-italic">
               {i18n.t("removed")}
             </small>
           )}
           {community.deleted && (
-            <small className="mr-2 text-muted font-italic">
+            <small className="me-2 text-muted font-italic">
               {i18n.t("deleted")}
             </small>
           )}
           {community.nsfw && (
-            <small className="mr-2 text-muted font-italic">
+            <small className="me-2 text-muted font-italic">
               {i18n.t("nsfw")}
             </small>
           )}
@@ -235,99 +229,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     );
   }
 
-  badges() {
-    const community_view = this.props.community_view;
-    const counts = community_view.counts;
-    return (
-      <ul className="my-1 list-inline">
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_online", {
-            count: this.props.online,
-            formattedCount: numToSI(this.props.online),
-          })}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_day", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}{" "}
-          / {i18n.t("day")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_week", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}{" "}
-          / {i18n.t("week")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_month", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}{" "}
-          / {i18n.t("month")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}{" "}
-          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_subscribers", {
-            count: Number(counts.subscribers),
-            formattedCount: numToSI(counts.subscribers),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_posts", {
-            count: Number(counts.posts),
-            formattedCount: numToSI(counts.posts),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_comments", {
-            count: Number(counts.comments),
-            formattedCount: numToSI(counts.comments),
-          })}
-        </li>
-        <li className="list-inline-item">
-          <Link
-            className="badge badge-primary"
-            to={`/modlog/${this.props.community_view.community.id}`}
-          >
-            {i18n.t("modlog")}
-          </Link>
-        </li>
-      </ul>
-    );
-  }
-
   mods() {
     return (
       <ul className="list-inline small">
@@ -345,7 +246,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const cv = this.props.community_view;
     return (
       <Link
-        className={`btn btn-secondary btn-block mb-2 ${
+        className={`btn btn-secondary d-block mb-2 w-100 ${
           cv.community.deleted || cv.community.removed ? "no-click" : ""
         }`}
         to={`/create_post?communityId=${cv.community.id}`}
@@ -358,10 +259,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   subscribe() {
     const community_view = this.props.community_view;
     return (
-      <div className="mb-2">
+      <>
         {community_view.subscribed == "NotSubscribed" && (
           <button
-            className="btn btn-secondary btn-block"
+            className="btn btn-secondary d-block mb-2 w-100"
             onClick={linkEvent(this, this.handleFollowCommunity)}
           >
             {this.state.followCommunityLoading ? (
@@ -371,41 +272,24 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             )}
           </button>
         )}
-      </div>
+      </>
     );
   }
 
   blockCommunity() {
-    const community_view = this.props.community_view;
+    const { subscribed, blocked } = this.props.community_view;
-    const blocked = this.props.community_view.blocked;
 
     return (
-      <div className="mb-2">
+      <>
-        {community_view.subscribed == "NotSubscribed" &&
+        {subscribed == "NotSubscribed" && (
-          (blocked ? (
           <button
-              className="btn btn-danger btn-block"
+            className="btn btn-danger d-block mb-2 w-100"
             onClick={linkEvent(this, this.handleBlockCommunity)}
           >
-              {this.state.blockCommunityLoading ? (
+            {i18n.t(blocked ? "unblock_community" : "block_community")}
-                <Spinner />
-              ) : (
-                i18n.t("unblock_community")
-              )}
           </button>
-          ) : (
-            <button
-              className="btn btn-danger btn-block"
-              onClick={linkEvent(this, this.handleBlockCommunity)}
-            >
-              {this.state.blockCommunityLoading ? (
-                <Spinner />
-              ) : (
-                i18n.t("block_community")
         )}
-            </button>
+      </>
-          ))}
-      </div>
     );
   }
 
@@ -538,25 +422,25 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         </ul>
         {this.state.showRemoveDialog && (
           <form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
-            <div className="form-group">
+            <div className="input-group mb-3">
               <label className="col-form-label" htmlFor="remove-reason">
                 {i18n.t("reason")}
               </label>
               <input
                 type="text"
                 id="remove-reason"
-                className="form-control mr-2"
+                className="form-control me-2"
                 placeholder={i18n.t("optional")}
                 value={this.state.removeReason}
                 onInput={linkEvent(this, this.handleModRemoveReasonChange)}
               />
             </div>
             {/* TODO hold off on expires for now */}
-            {/* <div class="form-group row"> */}
+            {/* <div class="mb-3 row"> */}
             {/*   <label class="col-form-label">Expires</label> */}
-            {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
+            {/*   <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
             {/* </div> */}
-            <div className="form-group">
+            <div className="input-group mb-3">
               <button type="submit" className="btn btn-secondary">
                 {this.state.removeCommunityLoading ? (
                   <Spinner />
@@ -569,23 +453,23 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         )}
         {this.state.showPurgeDialog && (
           <form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
-            <div className="form-group">
+            <div className="input-group mb-3">
               <PurgeWarning />
             </div>
-            <div className="form-group">
+            <div className="input-group mb-3">
-              <label className="sr-only" htmlFor="purge-reason">
+              <label className="visually-hidden" htmlFor="purge-reason">
                 {i18n.t("reason")}
               </label>
               <input
                 type="text"
                 id="purge-reason"
-                className="form-control mr-2"
+                className="form-control me-2"
                 placeholder={i18n.t("reason")}
                 value={this.state.purgeReason}
                 onInput={linkEvent(this, this.handlePurgeReasonChange)}
               />
             </div>
-            <div className="form-group">
+            <div className="input-group mb-3">
               {this.state.purgeCommunityLoading ? (
                 <Spinner />
               ) : (
@@ -668,10 +552,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   }
 
   handleBlockCommunity(i: Sidebar) {
-    i.setState({ blockCommunityLoading: true });
+    const { community, blocked } = i.props.community_view;
+
     i.props.onBlockCommunity({
-      community_id: 0,
+      community_id: community.id,
-      block: !i.props.community_view.blocked,
+      block: !blocked,
       auth: myAuthRequired(),
     });
   }

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

@@ -14,6 +14,7 @@ import { InitialFetchRequest } from "../../interfaces";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
+  RouteDataResponse,
   capitalizeFirstLetter,
   fetchThemeList,
   myAuthRequired,
@@ -32,6 +33,11 @@ import RateLimitForm from "./rate-limit-form";
 import { SiteForm } from "./site-form";
 import { TaglineForm } from "./tagline-form";
 
+type AdminSettingsData = RouteDataResponse<{
+  bannedRes: BannedPersonsResponse;
+  instancesRes: GetFederatedInstancesResponse;
+}>;
+
 interface AdminSettingsState {
   siteRes: GetSiteResponse;
   banned: PersonView[];
@@ -46,7 +52,7 @@ interface AdminSettingsState {
 }
 
 export class AdminSettings extends Component<any, AdminSettingsState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<AdminSettingsData>(this.context);
   state: AdminSettingsState = {
     siteRes: this.isoData.site_res,
     banned: [],
@@ -70,7 +76,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [bannedRes, instancesRes] = this.isoData.routeData;
+      const { bannedRes, instancesRes } = this.isoData.routeData;
+
       this.state = {
         ...this.state,
         bannedRes,
@@ -80,47 +87,18 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     }
   }
 
-  async fetchData() {
+  static async fetchInitialData({
-    this.setState({
-      bannedRes: { state: "loading" },
-      instancesRes: { state: "loading" },
-      themeList: [],
-      loading: true,
-    });
-
-    const auth = myAuthRequired();
-
-    const [bannedRes, instancesRes, themeList] = await Promise.all([
-      HttpService.client.getBannedPersons({ auth }),
-      HttpService.client.getFederatedInstances({ auth }),
-      fetchThemeList(),
-    ]);
-
-    this.setState({
-      bannedRes,
-      instancesRes,
-      themeList,
-      loading: false,
-    });
-  }
-
-  static fetchInitialData({
     auth,
     client,
-  }: InitialFetchRequest): Promise<any>[] {
+  }: InitialFetchRequest): Promise<AdminSettingsData> {
-    const promises: Promise<RequestState<any>>[] = [];
+    return {
-
+      bannedRes: await client.getBannedPersons({
-    if (auth) {
+        auth: auth as string,
-      promises.push(client.getBannedPersons({ auth }));
+      }),
-      promises.push(client.getFederatedInstances({ auth }));
+      instancesRes: await client.getFederatedInstances({
-    } else {
+        auth: auth as string,
-      promises.push(
+      }),
-        Promise.resolve({ state: "empty" }),
+    };
-        Promise.resolve({ state: "empty" })
-      );
-    }
-
-    return promises;
   }
 
   async componentDidMount() {
@@ -142,7 +120,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         : undefined;
 
     return (
-      <div className="container-lg">
+      <div className="admin-settings container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -218,6 +196,28 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     );
   }
 
+  async fetchData() {
+    this.setState({
+      bannedRes: { state: "loading" },
+      instancesRes: { state: "loading" },
+      themeList: [],
+    });
+
+    const auth = myAuthRequired();
+
+    const [bannedRes, instancesRes, themeList] = await Promise.all([
+      HttpService.client.getBannedPersons({ auth }),
+      HttpService.client.getFederatedInstances({ auth }),
+      fetchThemeList(),
+    ]);
+
+    this.setState({
+      bannedRes,
+      instancesRes,
+      themeList,
+    });
+  }
+
   admins() {
     return (
       <>

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

@@ -75,7 +75,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
 
   render() {
     return (
-      <div className="col-12">
+      <div className="home-emojis-form col-12">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -258,7 +258,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
           </table>
           <br />
           <button
-            className="btn btn-sm btn-secondary mr-2"
+            className="btn btn-sm btn-secondary me-2"
             onClick={linkEvent(this, this.handleAddEmojiClick)}
           >
             {i18n.t("add_custom_emoji")}

src/shared/components/home/home.tsx

@@ -1,5 +1,8 @@
+import { getQueryParams, getQueryString } from "@utils/helpers";
+import { canCreateCommunity } from "@utils/roles";
+import type { QueryParams } from "@utils/types";
 import { NoOptionI18nKeys } from "i18next";
-import { Component, linkEvent, MouseEventHandler } from "inferno";
+import { Component, MouseEventHandler, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
 import {
@@ -57,7 +60,7 @@ import { UserService } from "../../services";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
-  canCreateCommunity,
+  RouteDataResponse,
   commentsToFlatNodes,
   editComment,
   editPost,
@@ -68,13 +71,10 @@ import {
   getCommentParentId,
   getDataTypeString,
   getPageFromString,
-  getQueryParams,
-  getQueryString,
   getRandomFromList,
   mdToHtml,
   myAuth,
   postToCommentSortType,
-  QueryParams,
   relTags,
   restoreScrollPosition,
   saveScrollPosition,
@@ -117,6 +117,45 @@ interface HomeProps {
   page: number;
 }
 
+type HomeData = RouteDataResponse<{
+  postsRes: GetPostsResponse;
+  commentsRes: GetCommentsResponse;
+  trendingCommunitiesRes: ListCommunitiesResponse;
+}>;
+
+function getRss(listingType: ListingType) {
+  const { sort } = getHomeQueryParams();
+  const auth = myAuth();
+
+  let rss: string | undefined = undefined;
+
+  switch (listingType) {
+    case "All": {
+      rss = `/feeds/all.xml?sort=${sort}`;
+      break;
+    }
+    case "Local": {
+      rss = `/feeds/local.xml?sort=${sort}`;
+      break;
+    }
+    case "Subscribed": {
+      rss = auth ? `/feeds/front/${auth}.xml?sort=${sort}` : undefined;
+      break;
+    }
+  }
+
+  return (
+    rss && (
+      <>
+        <a href={rss} rel={relTags} title="RSS">
+          <Icon icon="rss" classes="text-muted small" />
+        </a>
+        <link rel="alternate" type="application/atom+xml" href={rss} />
+      </>
+    )
+  );
+}
+
 function getDataTypeFromQuery(type?: string): DataType {
   return type ? DataType[type] : DataType.Post;
 }
@@ -155,7 +194,7 @@ const MobileButton = ({
   onClick: MouseEventHandler<HTMLButtonElement>;
 }) => (
   <button
-    className="btn btn-secondary d-inline-block mb-2 mr-3"
+    className="btn btn-secondary d-inline-block mb-2 me-3"
     onClick={onClick}
   >
     {i18n.t(textKey)}{" "}
@@ -170,13 +209,13 @@ const LinkButton = ({
   path: string;
   translationKey: NoOptionI18nKeys;
 }) => (
-  <Link className="btn btn-secondary btn-block" to={path}>
+  <Link className="btn btn-secondary d-block" to={path}>
     {i18n.t(translationKey)}
   </Link>
 );
 
 export class Home extends Component<any, HomeState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<HomeData>(this.context);
   state: HomeState = {
     postsRes: { state: "empty" },
     commentsRes: { state: "empty" },
@@ -228,14 +267,14 @@ export class Home extends Component<any, HomeState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [postsRes, commentsRes, trendingCommunitiesRes] =
+      const { trendingCommunitiesRes, commentsRes, postsRes } =
         this.isoData.routeData;
 
       this.state = {
         ...this.state,
-        postsRes,
-        commentsRes,
         trendingCommunitiesRes,
+        commentsRes,
+        postsRes,
         tagline: getRandomFromList(this.state?.siteRes?.taglines ?? [])
           ?.content,
         isIsomorphic: true,
@@ -244,7 +283,12 @@ export class Home extends Component<any, HomeState> {
   }
 
   async componentDidMount() {
-    if (!this.state.isIsomorphic || !this.isoData.routeData.length) {
+    if (
+      !this.state.isIsomorphic ||
+      !Object.values(this.isoData.routeData).some(
+        res => res.state === "success" || res.state === "failed"
+      )
+    ) {
       await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
     }
 
@@ -255,13 +299,11 @@ export class Home extends Component<any, HomeState> {
     saveScrollPosition(this.context);
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     auth,
     query: { dataType: urlDataType, listingType, page: urlPage, sort: urlSort },
-  }: InitialFetchRequest<QueryParams<HomeProps>>): Promise<
+  }: InitialFetchRequest<QueryParams<HomeProps>>): Promise<HomeData> {
-    RequestState<any>
-  >[] {
     const dataType = getDataTypeFromQuery(urlDataType);
 
     // TODO figure out auth default_listingType, default_sort_type
@@ -270,7 +312,10 @@ export class Home extends Component<any, HomeState> {
 
     const page = urlPage ? Number(urlPage) : 1;
 
-    const promises: Promise<RequestState<any>>[] = [];
+    let postsRes: RequestState<GetPostsResponse> = { state: "empty" };
+    let commentsRes: RequestState<GetCommentsResponse> = {
+      state: "empty",
+    };
 
     if (dataType === DataType.Post) {
       const getPostsForm: GetPosts = {
@@ -282,8 +327,7 @@ export class Home extends Component<any, HomeState> {
         auth,
       };
 
-      promises.push(client.getPosts(getPostsForm));
+      postsRes = await client.getPosts(getPostsForm);
-      promises.push(Promise.resolve({ state: "empty" }));
     } else {
       const getCommentsForm: GetComments = {
         page,
@@ -293,8 +337,8 @@ export class Home extends Component<any, HomeState> {
         saved_only: false,
         auth,
       };
-      promises.push(Promise.resolve({ state: "empty" }));
+
-      promises.push(client.getComments(getCommentsForm));
+      commentsRes = await client.getComments(getCommentsForm);
     }
 
     const trendingCommunitiesForm: ListCommunities = {
@@ -303,9 +347,14 @@ export class Home extends Component<any, HomeState> {
       limit: trendingFetchLimit,
       auth,
     };
-    promises.push(client.listCommunities(trendingCommunitiesForm));
 
-    return promises;
+    return {
+      trendingCommunitiesRes: await client.listCommunities(
+        trendingCommunitiesForm
+      ),
+      commentsRes,
+      postsRes,
+    };
   }
 
   get documentTitle(): string {
@@ -325,7 +374,7 @@ export class Home extends Component<any, HomeState> {
     } = this.state;
 
     return (
-      <div className="container-lg">
+      <div className="home container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -340,7 +389,7 @@ export class Home extends Component<any, HomeState> {
                 ></div>
               )}
               <div className="d-block d-md-none">{this.mobileView}</div>
-              {this.posts()}
+              {this.posts}
             </main>
             <aside className="d-none d-md-block col-md-4">
               {this.mySidebar}
@@ -361,7 +410,6 @@ export class Home extends Component<any, HomeState> {
       siteRes: {
         site_view: { counts, site },
         admins,
-        online,
       },
       showSubscribedMobile,
       showTrendingMobile,
@@ -393,18 +441,18 @@ export class Home extends Component<any, HomeState> {
               site={site}
               admins={admins}
               counts={counts}
-              online={online}
               showLocal={showLocal(this.isoData)}
+              isMobile={true}
             />
           )}
           {showTrendingMobile && (
-            <div className="col-12 card border-secondary mb-3">
+            <div className="card border-secondary mb-3">
-              <div className="card-body">{this.trendingCommunities(true)}</div>
+              {this.trendingCommunities()}
             </div>
           )}
           {showSubscribedMobile && (
-            <div className="col-12 card border-secondary mb-3">
+            <div className="card border-secondary mb-3">
-              <div className="card-body">{this.subscribedCommunities}</div>
+              {this.subscribedCommunities(true)}
             </div>
           )}
         </div>
@@ -417,16 +465,66 @@ export class Home extends Component<any, HomeState> {
       siteRes: {
         site_view: { counts, site },
         admins,
-        online,
       },
     } = this.state;
 
     return (
-      <div>
+      <div id="sidebarContainer">
-        <div>
+        <section id="sidebarMain" className="card border-secondary mb-3">
-          <div className="card border-secondary mb-3">
-            <div className="card-body">
           {this.trendingCommunities()}
+        </section>
+        <SiteSidebar
+          site={site}
+          admins={admins}
+          counts={counts}
+          showLocal={showLocal(this.isoData)}
+        />
+        {this.hasFollows && (
+          <div className="accordion">
+            <section
+              id="sidebarSubscribed"
+              className="card border-secondary mb-3"
+            >
+              {this.subscribedCommunities(false)}
+            </section>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  trendingCommunities() {
+    switch (this.state.trendingCommunitiesRes?.state) {
+      case "loading":
+        return (
+          <h5>
+            <Spinner large />
+          </h5>
+        );
+      case "success": {
+        const trending = this.state.trendingCommunitiesRes.data.communities;
+        return (
+          <>
+            <header className="card-header d-flex align-items-center">
+              <h5 className="mb-0">
+                <T i18nKey="trending_communities">
+                  #
+                  <Link className="text-body" to="/communities">
+                    #
+                  </Link>
+                </T>
+              </h5>
+            </header>
+            <div className="card-body">
+              {trending.length > 0 && (
+                <ul className="list-inline">
+                  {trending.map(cv => (
+                    <li key={cv.community.id} className="list-inline-item">
+                      <CommunityLink community={cv.community} />
+                    </li>
+                  ))}
+                </ul>
+              )}
               {canCreateCommunity(this.state.siteRes) && (
                 <LinkButton
                   path="/create_community"
@@ -438,85 +536,58 @@ export class Home extends Component<any, HomeState> {
                 translationKey="explore_communities"
               />
             </div>
-          </div>
+          </>
-          <SiteSidebar
-            site={site}
-            admins={admins}
-            counts={counts}
-            online={online}
-            showLocal={showLocal(this.isoData)}
-          />
-          {this.hasFollows && (
-            <div className="card border-secondary mb-3">
-              <div className="card-body">{this.subscribedCommunities}</div>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  trendingCommunities(isMobile = false) {
-    switch (this.state.trendingCommunitiesRes?.state) {
-      case "loading":
-        return (
-          <h5>
-            <Spinner large />
-          </h5>
-        );
-      case "success": {
-        const trending = this.state.trendingCommunitiesRes.data.communities;
-        return (
-          <div className={!isMobile ? "mb-2" : ""}>
-            <h5>
-              <T i18nKey="trending_communities">
-                #
-                <Link className="text-body" to="/communities">
-                  #
-                </Link>
-              </T>
-            </h5>
-            <ul className="list-inline mb-0">
-              {trending.map(cv => (
-                <li
-                  key={cv.community.id}
-                  className="list-inline-item d-inline-block"
-                >
-                  <CommunityLink community={cv.community} />
-                </li>
-              ))}
-            </ul>
-          </div>
         );
       }
     }
   }
 
-  get subscribedCommunities() {
+  subscribedCommunities(isMobile = false) {
     const { subscribedCollapsed } = this.state;
 
     return (
-      <div>
+      <>
-        <h5>
+        <header
+          className="card-header d-flex align-items-center"
+          id="sidebarSubscribedHeader"
+        >
+          <h5 className="mb-0 d-inline">
             <T class="d-inline" i18nKey="subscribed_to_communities">
               #
               <Link className="text-body" to="/communities">
                 #
               </Link>
             </T>
+          </h5>
+          {!isMobile && (
             <button
+              type="button"
               className="btn btn-sm text-muted"
               onClick={linkEvent(this, this.handleCollapseSubscribe)}
-            aria-label={i18n.t("collapse")}
+              aria-label={
-            data-tippy-content={i18n.t("collapse")}
+                subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+              }
+              data-tippy-content={
+                subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
+              }
+              data-bs-toggle="collapse"
+              data-bs-target="#sidebarSubscribedBody"
+              aria-expanded="true"
+              aria-controls="sidebarSubscribedBody"
             >
               <Icon
                 icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
                 classes="icon-inline"
               />
             </button>
-        </h5>
+          )}
-        {!subscribedCollapsed && (
+        </header>
+        <div
+          id="sidebarSubscribedBody"
+          className="collapse show"
+          aria-labelledby="sidebarSubscribedHeader"
+        >
+          <div className="card-body">
             <ul className="list-inline mb-0">
               {UserService.Instance.myUserInfo?.follows.map(cfv => (
                 <li
@@ -527,8 +598,9 @@ export class Home extends Component<any, HomeState> {
                 </li>
               ))}
             </ul>
-        )}
           </div>
+        </div>
+      </>
     );
   }
 
@@ -555,7 +627,7 @@ export class Home extends Component<any, HomeState> {
     await this.fetchData();
   }
 
-  posts() {
+  get posts() {
     const { page } = getHomeQueryParams();
 
     return (
@@ -574,7 +646,7 @@ export class Home extends Component<any, HomeState> {
     const siteRes = this.state.siteRes;
 
     if (dataType === DataType.Post) {
-      switch (this.state.postsRes?.state) {
+      switch (this.state.postsRes.state) {
         case "loading":
           return (
             <h5>
@@ -662,59 +734,26 @@ export class Home extends Component<any, HomeState> {
     const { listingType, dataType, sort } = getHomeQueryParams();
 
     return (
-      <div className="mb-3">
+      <div className="row align-items-center mb-3 g-3">
-        <span className="mr-3">
+        <div className="col-auto">
           <DataTypeSelect
             type_={dataType}
             onChange={this.handleDataTypeChange}
           />
-        </span>
+        </div>
-        <span className="mr-3">
+        <div className="col-auto">
           <ListingTypeSelect
             type_={listingType}
             showLocal={showLocal(this.isoData)}
             showSubscribed
             onChange={this.handleListingTypeChange}
           />
-        </span>
-        <span className="mr-2">
-          <SortSelect sort={sort} onChange={this.handleSortChange} />
-        </span>
-        {this.getRss(listingType)}
         </div>
-    );
+        <div className="col-auto">
-  }
+          <SortSelect sort={sort} onChange={this.handleSortChange} />
-
+        </div>
-  getRss(listingType: ListingType) {
+        <div className="col-auto ps-0">{getRss(listingType)}</div>
-    const { sort } = getHomeQueryParams();
+      </div>
-    const auth = myAuth();
-
-    let rss: string | undefined = undefined;
-
-    switch (listingType) {
-      case "All": {
-        rss = `/feeds/all.xml?sort=${sort}`;
-        break;
-      }
-      case "Local": {
-        rss = `/feeds/local.xml?sort=${sort}`;
-        break;
-      }
-      case "Subscribed": {
-        rss = auth ? `/feeds/front/${auth}.xml?sort=${sort}` : undefined;
-        break;
-      }
-    }
-
-    return (
-      rss && (
-        <>
-          <a href={rss} rel={relTags} title="RSS">
-            <Icon icon="rss" classes="text-muted small" />
-          </a>
-          <link rel="alternate" type="application/atom+xml" href={rss} />
-        </>
-      )
     );
   }
 

src/shared/components/home/instances.tsx

@@ -8,10 +8,14 @@ import { i18n } from "../../i18next";
 import { InitialFetchRequest } from "../../interfaces";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
-import { relTags, setIsoData } from "../../utils";
+import { RouteDataResponse, relTags, setIsoData } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 
+type InstancesData = RouteDataResponse<{
+  federatedInstancesResponse: GetFederatedInstancesResponse;
+}>;
+
 interface InstancesState {
   instancesRes: RequestState<GetFederatedInstancesResponse>;
   siteRes: GetSiteResponse;
@@ -19,7 +23,7 @@ interface InstancesState {
 }
 
 export class Instances extends Component<any, InstancesState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<InstancesData>(this.context);
   state: InstancesState = {
     instancesRes: { state: "empty" },
     siteRes: this.isoData.site_res,
@@ -33,7 +37,7 @@ export class Instances extends Component<any, InstancesState> {
     if (FirstLoadService.isFirstLoad) {
       this.state = {
         ...this.state,
-        instancesRes: this.isoData.routeData[0],
+        instancesRes: this.isoData.routeData.federatedInstancesResponse,
         isIsomorphic: true,
       };
     }
@@ -55,10 +59,12 @@ export class Instances extends Component<any, InstancesState> {
     });
   }
 
-  static fetchInitialData(
+  static async fetchInitialData({
-    req: InitialFetchRequest
+    client,
-  ): Promise<RequestState<any>>[] {
+  }: InitialFetchRequest): Promise<InstancesData> {
-    return [req.client.getFederatedInstances({})];
+    return {
+      federatedInstancesResponse: await client.getFederatedInstances({}),
+    };
   }
 
   get documentTitle(): string {
@@ -103,7 +109,7 @@ export class Instances extends Component<any, InstancesState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="home-instances container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

src/shared/components/home/legal.tsx

@@ -25,7 +25,7 @@ export class Legal extends Component<any, LegalState> {
   render() {
     const legal = this.state.siteRes.site_view.local_site.legal_information;
     return (
-      <div className="container-lg">
+      <div className="legal container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

src/shared/components/home/login.tsx

@@ -1,9 +1,10 @@
+import { isBrowser } from "@utils/browser";
 import { Component, linkEvent } from "inferno";
 import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
-import { isBrowser, myAuth, setIsoData, toast, validEmail } from "../../utils";
+import { myAuth, setIsoData, toast, validEmail } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 
@@ -49,7 +50,7 @@ export class Login extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="login container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -66,7 +67,7 @@ export class Login extends Component<any, State> {
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
           <h5>{i18n.t("login")}</h5>
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label
               className="col-sm-2 col-form-label"
               htmlFor="login-email-or-username"
@@ -86,7 +87,7 @@ export class Login extends Component<any, State> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-sm-2 col-form-label" htmlFor="login-password">
               {i18n.t("password")}
             </label>
@@ -116,7 +117,7 @@ export class Login extends Component<any, State> {
             </div>
           </div>
           {this.state.showTotp && (
-            <div className="form-group row">
+            <div className="mb-3 row">
               <label
                 className="col-sm-6 col-form-label"
                 htmlFor="login-totp-token"
@@ -137,7 +138,7 @@ export class Login extends Component<any, State> {
               </div>
             </div>
           )}
-          <div className="form-group row">
+          <div className="mb-3 row">
             <div className="col-sm-10">
               <button type="submit" className="btn btn-secondary">
                 {this.state.loginRes.state == "loading" ? (
@@ -172,7 +173,7 @@ export class Login extends Component<any, State> {
             toast(i18n.t("enter_two_factor_code"), "info");
           }
 
-          i.setState({ loginRes: { state: "empty" } });
+          i.setState({ loginRes: { state: "failed", msg: loginRes.msg } });
           break;
         }
 

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

@@ -51,30 +51,30 @@ function RateLimits({
   rateLimitValue,
 }: RateLimitsProps) {
   return (
-    <div className="form-group row">
+    <div className="mb-3 row">
-      <label className="col-12 col-form-label" htmlFor="rate-limit">
+      <div className="col-md-6">
-        {i18n.t("rate_limit")}
+        <label htmlFor="rate-limit">{i18n.t("rate_limit")}</label>
-      </label>
         <input
           type="number"
           id="rate-limit"
-        className="form-control col-12"
+          className="form-control"
           min={0}
           value={rateLimitValue}
           onInput={handleRateLimit}
         />
-      <label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
+      </div>
-        {i18n.t("per_second")}
+      <div className="col-md-6">
-      </label>
+        <label htmlFor="rate-limit-per-second">{i18n.t("per_second")}</label>
         <input
           type="number"
           id="rate-limit-per-second"
-        className="form-control col-12"
+          className="form-control"
           min={0}
           value={rateLimitPerSecondValue}
           onInput={handleRateLimitPerSecond}
         />
       </div>
+    </div>
   );
 }
 
@@ -133,7 +133,10 @@ export default class RateLimitsForm extends Component<
 
   render() {
     return (
-      <form onSubmit={linkEvent(this, submitRateLimitForm)}>
+      <form
+        className="rate-limit-form"
+        onSubmit={linkEvent(this, submitRateLimitForm)}
+      >
         <h5>{i18n.t("rate_limit_header")}</h5>
         <Tabs
           tabs={rateLimitTypes.map(rateLimitType => ({
@@ -157,11 +160,10 @@ export default class RateLimitsForm extends Component<
             ),
           }))}
         />
-        <div className="form-group row">
+        <div className="col-12 mb-3">
-          <div className="col-12">
           <button
             type="submit"
-              className="btn btn-secondary mr-2"
+            className="btn btn-secondary me-2"
             disabled={this.props.loading}
           >
             {this.props.loading ? (
@@ -171,7 +173,6 @@ export default class RateLimitsForm extends Component<
             )}
           </button>
         </div>
-        </div>
       </form>
     );
   }

src/shared/components/home/setup.tsx

@@ -60,7 +60,7 @@ export class Setup extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="home-setup container-lg">
         <Helmet title={this.documentTitle} />
         <div className="row">
           <div className="col-12 offset-lg-3 col-lg-6">
@@ -86,7 +86,7 @@ export class Setup extends Component<any, State> {
     return (
       <form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
         <h5>{i18n.t("setup_admin")}</h5>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="username">
             {i18n.t("username")}
           </label>
@@ -103,7 +103,7 @@ export class Setup extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="email">
             {i18n.t("email")}
           </label>
@@ -120,7 +120,7 @@ export class Setup extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="password">
             {i18n.t("password")}
           </label>
@@ -138,7 +138,7 @@ export class Setup extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="verify-password">
             {i18n.t("verify_password")}
           </label>
@@ -156,7 +156,7 @@ export class Setup extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-sm-10">
             <button type="submit" className="btn btn-secondary">
               {this.state.registerRes.state == "loading" ? (

src/shared/components/home/signup.tsx

@@ -1,3 +1,4 @@
+import { isBrowser } from "@utils/browser";
 import { Options, passwordStrength } from "check-password-strength";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
@@ -13,7 +14,6 @@ import { i18n } from "../../i18next";
 import { UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
-  isBrowser,
   joinLemmyUrl,
   mdToHtml,
   myAuth,
@@ -127,7 +127,7 @@ export class Signup extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="home-signup container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -148,7 +148,7 @@ export class Signup extends Component<any, State> {
         <h5>{this.titleName(siteView)}</h5>
 
         {this.isLemmyMl && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <div className="mt-2 mb-0 alert alert-warning" role="alert">
               <T i18nKey="lemmy_ml_registration_message">
                 #<a href={joinLemmyUrl}>#</a>
@@ -157,7 +157,7 @@ export class Signup extends Component<any, State> {
           </div>
         )}
 
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label
             className="col-sm-2 col-form-label"
             htmlFor="register-username"
@@ -180,7 +180,7 @@ export class Signup extends Component<any, State> {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="register-email">
             {i18n.t("email")}
           </label>
@@ -204,14 +204,14 @@ export class Signup extends Component<any, State> {
               this.state.form.email &&
               !validEmail(this.state.form.email) && (
                 <div className="mt-2 mb-0 alert alert-warning" role="alert">
-                  <Icon icon="alert-triangle" classes="icon-inline mr-2" />
+                  <Icon icon="alert-triangle" classes="icon-inline me-2" />
                   {i18n.t("no_password_reset")}
                 </div>
               )}
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label
             className="col-sm-2 col-form-label"
             htmlFor="register-password"
@@ -238,7 +238,7 @@ export class Signup extends Component<any, State> {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label
             className="col-sm-2 col-form-label"
             htmlFor="register-verify-password"
@@ -261,10 +261,10 @@ export class Signup extends Component<any, State> {
 
         {siteView.local_site.registration_mode == "RequireApplication" && (
           <>
-            <div className="form-group row">
+            <div className="mb-3 row">
               <div className="offset-sm-2 col-sm-10">
                 <div className="mt-2 alert alert-warning" role="alert">
-                  <Icon icon="alert-triangle" classes="icon-inline mr-2" />
+                  <Icon icon="alert-triangle" classes="icon-inline me-2" />
                   {i18n.t("fill_out_application")}
                 </div>
                 {siteView.local_site.application_question && (
@@ -278,7 +278,7 @@ export class Signup extends Component<any, State> {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="mb-3 row">
               <label
                 className="col-sm-2 col-form-label"
                 htmlFor="application_answer"
@@ -298,8 +298,7 @@ export class Signup extends Component<any, State> {
           </>
         )}
         {this.renderCaptcha()}
-        {siteView.local_site.enable_nsfw && (
+        <div className="mb-3 row">
-          <div className="form-group row">
           <div className="col-sm-10">
             <div className="form-check">
               <input
@@ -309,16 +308,12 @@ export class Signup extends Component<any, State> {
                 checked={this.state.form.show_nsfw}
                 onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
               />
-                <label
+              <label className="form-check-label" htmlFor="register-show-nsfw">
-                  className="form-check-label"
-                  htmlFor="register-show-nsfw"
-                >
                 {i18n.t("show_nsfw")}
               </label>
             </div>
           </div>
         </div>
-        )}
         <input
           tabIndex={-1}
           autoComplete="false"
@@ -329,7 +324,7 @@ export class Signup extends Component<any, State> {
           value={this.state.form.honeypot}
           onInput={linkEvent(this, this.handleHoneyPotChange)}
         />
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-sm-10">
             <button type="submit" className="btn btn-secondary">
               {this.state.registerRes.state == "loading" ? (
@@ -351,9 +346,9 @@ export class Signup extends Component<any, State> {
       case "success": {
         const res = this.state.captchaRes.data;
         return (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-sm-2" htmlFor="register-captcha">
-              <span className="mr-2">{i18n.t("enter_code")}</span>
+              <span className="me-2">{i18n.t("enter_code")}</span>
               <button
                 type="button"
                 className="btn btn-secondary"
@@ -396,7 +391,7 @@ export class Signup extends Component<any, State> {
           />
           {captchaRes.wav && (
             <button
-              className="rounded-bottom btn btn-sm btn-secondary btn-block"
+              className="rounded-bottom btn btn-sm btn-secondary d-block"
               style="border-top-right-radius: 0; border-top-left-radius: 0;"
               title={i18n.t("play_captcha_audio")}
               onClick={linkEvent(this, this.handleCaptchaPlay)}

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

@@ -81,7 +81,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
       slur_filter_regex: ls.slur_filter_regex,
       actor_name_max_length: ls.actor_name_max_length,
       federation_enabled: ls.federation_enabled,
-      federation_debug: ls.federation_debug,
       federation_worker_count: ls.federation_worker_count,
       captcha_enabled: ls.captcha_enabled,
       captcha_difficulty: ls.captcha_difficulty,
@@ -121,7 +120,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
   render() {
     const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
     return (
-      <form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
+      <form
+        className="site-form"
+        onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}
+      >
         <NavigationPrompt
           when={
             !this.props.loading &&
@@ -140,7 +142,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             ? capitalizeFirstLetter(i18n.t("edit"))
             : capitalizeFirstLetter(i18n.t("setup"))
         } ${i18n.t("your_site")}`}</h5>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-12 col-form-label" htmlFor="create-site-name">
             {i18n.t("name")}
           </label>
@@ -157,8 +159,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group">
+        <div className="input-group mb-3">
-          <label className="mr-2">{i18n.t("icon")}</label>
+          <label className="me-2 col-form-label">{i18n.t("icon")}</label>
           <ImageUploadForm
             uploadTitle={i18n.t("upload_icon")}
             imageSrc={this.state.siteForm.icon}
@@ -167,8 +169,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             rounded
           />
         </div>
-        <div className="form-group">
+        <div className="input-group mb-3">
-          <label className="mr-2">{i18n.t("banner")}</label>
+          <label className="me-2 col-form-label">{i18n.t("banner")}</label>
           <ImageUploadForm
             uploadTitle={i18n.t("upload_banner")}
             imageSrc={this.state.siteForm.banner}
@@ -176,7 +178,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             onRemove={this.handleBannerRemove}
           />
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-12 col-form-label" htmlFor="site-desc">
             {i18n.t("description")}
           </label>
@@ -191,7 +193,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-12 col-form-label">{i18n.t("sidebar")}</label>
           <div className="col-12">
             <MarkdownTextArea
@@ -203,7 +205,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-12 col-form-label">
             {i18n.t("legal_information")}
           </label>
@@ -217,7 +219,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -236,7 +238,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -255,10 +257,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <label
-              className="form-check-label mr-2"
+              className="form-check-label me-2"
               htmlFor="create-site-registration-mode"
             >
               {i18n.t("registration_mode")}
@@ -267,7 +269,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               id="create-site-registration-mode"
               value={this.state.siteForm.registration_mode}
               onChange={linkEvent(this, this.handleSiteRegistrationModeChange)}
-              className="custom-select w-auto"
+              className="form-select d-inline-block w-auto"
             >
               <option value={"RequireApplication"}>
                 {i18n.t("require_registration_application")}
@@ -278,7 +280,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
         {this.state.siteForm.registration_mode == "RequireApplication" && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-12 col-form-label">
               {i18n.t("application_questionnaire")}
             </label>
@@ -293,7 +295,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -315,7 +317,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -337,7 +339,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -359,7 +361,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -378,10 +380,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <label
-              className="form-check-label mr-2"
+              className="form-check-label me-2"
               htmlFor="create-site-default-theme"
             >
               {i18n.t("theme")}
@@ -390,7 +392,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               id="create-site-default-theme"
               value={this.state.siteForm.default_theme}
               onChange={linkEvent(this, this.handleSiteDefaultTheme)}
-              className="custom-select w-auto"
+              className="form-select d-inline-block w-auto"
             >
               <option value="browser">{i18n.t("browser_default")}</option>
               {this.props.themeList?.map(theme => (
@@ -402,8 +404,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
         {this.props.showLocal && (
-          <form className="form-group row">
+          <form className="mb-3 row">
-            <label className="col-sm-3">{i18n.t("listing_type")}</label>
+            <label className="col-sm-3 col-form-label">
+              {i18n.t("listing_type")}
+            </label>
             <div className="col-sm-9">
               <ListingTypeSelect
                 type_={this.state.siteForm.default_post_listing_type ?? "Local"}
@@ -414,7 +418,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </form>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -433,7 +437,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -452,7 +456,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label
             className="col-12 col-form-label"
             htmlFor="create-site-slur-filter-regex"
@@ -479,7 +483,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           onChange={this.handleDiscussionLanguageChange}
           showAll
         />
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label
             className="col-12 col-form-label"
             htmlFor="create-site-actor-name"
@@ -497,7 +501,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -518,11 +522,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
         </div>
         {this.state.siteForm.federation_enabled && (
           <>
-            <div className="form-group row">
+            <div className="mb-3 row">
               {this.federatedInstanceSelect("allowed_instances")}
               {this.federatedInstanceSelect("blocked_instances")}
             </div>
-            <div className="form-group row">
+            <div className="mb-3 row">
               <div className="col-12">
                 <div className="form-check">
                   <input
@@ -541,7 +545,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 </div>
               </div>
             </div>
-            <div className="form-group row">
+            <div className="mb-3 row">
               <label
                 className="col-12 col-form-label"
                 htmlFor="create-site-federation-worker-count"
@@ -564,7 +568,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <div className="form-check">
               <input
@@ -584,10 +588,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           </div>
         </div>
         {this.state.siteForm.captcha_enabled && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <div className="col-12">
               <label
-                className="form-check-label mr-2"
+                className="form-check-label me-2"
                 htmlFor="create-site-captcha-difficulty"
               >
                 {i18n.t("captcha_difficulty")}
@@ -596,7 +600,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 id="create-site-captcha-difficulty"
                 value={this.state.siteForm.captcha_difficulty}
                 onChange={linkEvent(this, this.handleSiteCaptchaDifficulty)}
-                className="custom-select w-auto"
+                className="form-select d-inline-block w-auto"
               >
                 <option value="easy">{i18n.t("easy")}</option>
                 <option value="medium">{i18n.t("medium")}</option>
@@ -605,11 +609,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-12">
             <button
               type="submit"
-              className="btn btn-secondary mr-2"
+              className="btn btn-secondary me-2"
               disabled={this.props.loading}
             >
               {this.props.loading ? (
@@ -647,7 +651,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           />
           <button
             type="button"
-            className="btn btn-sm bg-success ml-2"
+            className="btn btn-sm bg-success ms-2"
             onClick={linkEvent(key, this.handleAddInstance)}
             style={"width: 2rem; height: 2rem;"}
             tabIndex={

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

@@ -1,8 +1,8 @@
 import { Component, linkEvent } from "inferno";
-import { Link } from "inferno-router";
 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { mdToHtml, numToSI } from "../../utils";
+import { mdToHtml } from "../../utils";
+import { Badges } from "../common/badges";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
@@ -12,7 +12,7 @@ interface SiteSidebarProps {
   showLocal: boolean;
   counts?: SiteAggregates;
   admins?: PersonView[];
-  online?: number;
+  isMobile?: boolean;
 }
 
 interface SiteSidebarState {
@@ -30,31 +30,49 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
 
   render() {
     return (
-      <div className="card border-secondary mb-3">
+      <div className="site-sidebar accordion">
-        <div className="card-body">
+        <section id="sidebarInfo" className="card border-secondary mb-3">
-          <div>
+          <header
-            <div className="mb-2">{this.siteName()}</div>
+            className="card-header d-flex align-items-center"
+            id="sidebarInfoHeader"
+          >
+            {this.siteName()}
             {!this.state.collapsed && (
-              <>
               <BannerIconHeader banner={this.props.site.banner} />
-                {this.siteInfo()}
-              </>
             )}
+          </header>
+
+          <div
+            id="sidebarInfoBody"
+            className="collapse show"
+            aria-labelledby="sidebarInfoHeader"
+          >
+            <div className="card-body">{this.siteInfo()}</div>
           </div>
-        </div>
+        </section>
       </div>
     );
   }
 
   siteName() {
     return (
-      <h5 className="mb-0 d-inline">
+      <>
-        {this.props.site.name}
+        <h5 className="mb-0 d-inline">{this.props.site.name}</h5>
+        {!this.props.isMobile && (
           <button
-          className="btn btn-sm text-muted"
+            type="button"
+            className="btn btn-sm"
             onClick={linkEvent(this, this.handleCollapseSidebar)}
-          aria-label={i18n.t("collapse")}
+            aria-label={
-          data-tippy-content={i18n.t("collapse")}
+              this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-tippy-content={
+              this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
+            }
+            data-bs-toggle="collapse"
+            data-bs-target="#sidebarInfoBody"
+            aria-expanded="true"
+            aria-controls="sidebarInfoBody"
           >
             {this.state.collapsed ? (
               <Icon icon="plus-square" classes="icon-inline" />
@@ -62,7 +80,8 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
               <Icon icon="minus-square" classes="icon-inline" />
             )}
           </button>
-      </h5>
+        )}
+      </>
     );
   }
 
@@ -72,7 +91,7 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
       <div>
         {site.description && <h6>{site.description}</h6>}
         {site.sidebar && this.siteSidebar(site.sidebar)}
-        {this.props.counts && this.badges(this.props.counts)}
+        {this.props.counts && <Badges counts={this.props.counts} />}
         {this.props.admins && this.admins(this.props.admins)}
       </div>
     );
@@ -97,102 +116,6 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
     );
   }
 
-  badges(siteAggregates: SiteAggregates) {
-    const counts = siteAggregates;
-    const online = this.props.online ?? 1;
-    return (
-      <ul className="my-2 list-inline">
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_online", {
-            count: online,
-            formattedCount: numToSI(online),
-          })}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_day", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}{" "}
-          / {i18n.t("day")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_week", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}{" "}
-          / {i18n.t("week")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_month", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}{" "}
-          / {i18n.t("month")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}{" "}
-          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_users", {
-            count: Number(counts.users),
-            formattedCount: numToSI(counts.users),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_communities", {
-            count: Number(counts.communities),
-            formattedCount: numToSI(counts.communities),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_posts", {
-            count: Number(counts.posts),
-            formattedCount: numToSI(counts.posts),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_comments", {
-            count: Number(counts.comments),
-            formattedCount: numToSI(counts.comments),
-          })}
-        </li>
-        <li className="list-inline-item">
-          <Link className="badge badge-primary" to="/modlog">
-            {i18n.t("modlog")}
-          </Link>
-        </li>
-      </ul>
-    );
-  }
-
   handleCollapseSidebar(i: SiteSidebar) {
     i.setState({ collapsed: !i.state.collapsed });
   }

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

@@ -31,7 +31,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
 
   render() {
     return (
-      <div className="col-12">
+      <div className="tagline-form col-12">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -89,10 +89,10 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
               ))}
             </tbody>
           </table>
-          <div className="form-group row">
+          <div className="mb-3 row">
             <div className="col-12">
               <button
-                className="btn btn-sm btn-secondary mr-2"
+                className="btn btn-sm btn-secondary me-2"
                 onClick={linkEvent(this, this.handleAddTaglineClick)}
               >
                 {i18n.t("add_tagline")}
@@ -100,11 +100,11 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
             </div>
           </div>
 
-          <div className="form-group row">
+          <div className="mb-3 row">
             <div className="col-12">
               <button
                 onClick={linkEvent(this, this.handleSaveClick)}
-                className="btn btn-secondary mr-2"
+                className="btn btn-secondary me-2"
                 disabled={this.props.loading}
               >
                 {this.props.loading ? (

src/shared/components/modlog.tsx

@@ -1,3 +1,6 @@
+import { debounce, getQueryParams, getQueryString } from "@utils/helpers";
+import { amAdmin, amMod } from "@utils/roles";
+import type { QueryParams } from "@utils/types";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
@@ -13,6 +16,7 @@ import {
   GetModlog,
   GetModlogResponse,
   GetPersonDetails,
+  GetPersonDetailsResponse,
   ModAddCommunityView,
   ModAddView,
   ModBanFromCommunityView,
@@ -33,16 +37,11 @@ import { FirstLoadService } from "../services/FirstLoadService";
 import { HttpService, RequestState } from "../services/HttpService";
 import {
   Choice,
-  QueryParams,
+  RouteDataResponse,
-  amAdmin,
-  amMod,
-  debounce,
   fetchLimit,
   fetchUsers,
   getIdFromString,
   getPageFromString,
-  getQueryParams,
-  getQueryString,
   getUpdatedSearchId,
   myAuth,
   personToChoice,
@@ -74,6 +73,13 @@ type View =
   | AdminPurgePostView
   | AdminPurgeCommentView;
 
+type ModlogData = RouteDataResponse<{
+  res: GetModlogResponse;
+  communityRes: GetCommunityResponse;
+  modUserResponse: GetPersonDetailsResponse;
+  userResponse: GetPersonDetailsResponse;
+}>;
+
 interface ModlogType {
   id: number;
   type_: ModlogActionType;
@@ -575,8 +581,8 @@ const Filter = ({
   options: Choice[];
   loading: boolean;
 }) => (
-  <div className="col-sm-6 form-group">
+  <div className="col-sm-6 mb-3">
-    <label className="col-form-label" htmlFor={`filter-${filterType}`}>
+    <label className="mb-2" htmlFor={`filter-${filterType}`}>
       {i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
     </label>
     <SearchableSelect
@@ -631,7 +637,7 @@ export class Modlog extends Component<
   RouteComponentProps<{ communityId?: string }>,
   ModlogState
 > {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<ModlogData>(this.context);
 
   state: ModlogState = {
     res: { state: "empty" },
@@ -653,25 +659,26 @@ export class Modlog extends Component<
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [res, communityRes, filteredModRes, filteredUserRes] =
+      const { res, communityRes, modUserResponse, userResponse } =
         this.isoData.routeData;
+
       this.state = {
         ...this.state,
         res,
         communityRes,
       };
 
-      if (filteredModRes.state === "success") {
+      if (modUserResponse.state === "success") {
         this.state = {
           ...this.state,
-          modSearchOptions: [personToChoice(filteredModRes.data.person_view)],
+          modSearchOptions: [personToChoice(modUserResponse.data.person_view)],
         };
       }
 
-      if (filteredUserRes.state === "success") {
+      if (userResponse.state === "success") {
         this.state = {
           ...this.state,
-          userSearchOptions: [personToChoice(filteredUserRes.data.person_view)],
+          userSearchOptions: [personToChoice(userResponse.data.person_view)],
         };
       }
     }
@@ -732,7 +739,7 @@ export class Modlog extends Component<
     const { actionType, modId, userId } = getModlogQueryParams();
 
     return (
-      <div className="container-lg">
+      <div className="modlog container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -746,7 +753,7 @@ export class Modlog extends Component<
             <Icon
               icon="alert-triangle"
               inline
-              classes="mr-sm-2 mx-auto d-sm-inline d-block"
+              classes="me-sm-2 mx-auto d-sm-inline d-block"
             />
             <T i18nKey="modlog_content_warning" class="d-inline">
               #<strong>#</strong>#
@@ -763,11 +770,12 @@ export class Modlog extends Component<
               <span>{i18n.t("modlog")}</span>
             </h5>
           )}
-          <div className="form-row">
+          <div className="row mb-2">
+            <div className="col-sm-6">
               <select
                 value={actionType}
                 onChange={linkEvent(this, this.handleFilterActionChange)}
-              className="custom-select col-sm-6"
+                className="form-select"
                 aria-label="action"
               >
                 <option disabled aria-hidden="true">
@@ -778,11 +786,15 @@ export class Modlog extends Component<
                 <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={"ModRemoveCommunity"}>
+                  Removing Communities
+                </option>
                 <option value={"ModBanFromCommunity"}>
                   Banning From Communities
                 </option>
-              <option value={"ModAddCommunity"}>Adding Mod to Community</option>
+                <option value={"ModAddCommunity"}>
+                  Adding Mod to Community
+                </option>
                 <option value={"ModTransferCommunity"}>
                   Transferring Communities
                 </option>
@@ -790,7 +802,8 @@ export class Modlog extends Component<
                 <option value={"ModBan"}>Banning From Site</option>
               </select>
             </div>
-          <div className="form-row mb-2">
+          </div>
+          <div className="row mb-2">
             <Filter
               filterType="user"
               onChange={this.handleUserChange}
@@ -958,17 +971,14 @@ export class Modlog extends Component<
     }
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     path,
     query: { modId: urlModId, page, userId: urlUserId, actionType },
     auth,
     site,
-  }: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<
+  }: InitialFetchRequest<QueryParams<ModlogProps>>): Promise<ModlogData> {
-    RequestState<any>
-  >[] {
     const pathSplit = path.split("/");
-    const promises: Promise<RequestState<any>>[] = [];
     const communityId = getIdFromString(pathSplit[2]);
     const modId = !site.site_view.local_site.hide_modlog_mod_names
       ? getIdFromString(urlModId)
@@ -985,40 +995,50 @@ export class Modlog extends Component<
       auth,
     };
 
-    promises.push(client.getModlog(modlogForm));
+    let communityResponse: RequestState<GetCommunityResponse> = {
+      state: "empty",
+    };
 
     if (communityId) {
       const communityForm: GetCommunity = {
         id: communityId,
         auth,
       };
-      promises.push(client.getCommunity(communityForm));
+
-    } else {
+      communityResponse = await client.getCommunity(communityForm);
-      promises.push(Promise.resolve({ state: "empty" }));
     }
 
+    let modUserResponse: RequestState<GetPersonDetailsResponse> = {
+      state: "empty",
+    };
+
     if (modId) {
       const getPersonForm: GetPersonDetails = {
         person_id: modId,
         auth,
       };
 
-      promises.push(client.getPersonDetails(getPersonForm));
+      modUserResponse = await client.getPersonDetails(getPersonForm);
-    } else {
-      promises.push(Promise.resolve({ state: "empty" }));
     }
 
+    let userResponse: RequestState<GetPersonDetailsResponse> = {
+      state: "empty",
+    };
+
     if (userId) {
       const getPersonForm: GetPersonDetails = {
         person_id: userId,
         auth,
       };
 
-      promises.push(client.getPersonDetails(getPersonForm));
+      userResponse = await client.getPersonDetails(getPersonForm);
-    } else {
-      promises.push(Promise.resolve({ state: "empty" }));
     }
 
-    return promises;
+    return {
+      res: await client.getModlog(modlogForm),
+      communityRes: communityResponse,
+      modUserResponse,
+      userResponse,
+    };
   }
 }

src/shared/components/person/cake-day.tsx

@@ -10,7 +10,7 @@ export class CakeDay extends Component<CakeDayProps, any> {
   render() {
     return (
       <div
-        className={`mx-2 d-inline-block unselectable pointer`}
+        className={`cake-day mx-2 d-inline-block unselectable pointer`}
         data-tippy-content={this.cakeDayTippy()}
       >
         <Icon icon="cake" classes="icon-inline" />

src/shared/components/person/inbox.tsx

@@ -24,10 +24,7 @@ import {
   DistinguishComment,
   EditComment,
   EditPrivateMessage,
-  GetPersonMentions,
   GetPersonMentionsResponse,
-  GetPrivateMessages,
-  GetReplies,
   GetRepliesResponse,
   GetSiteResponse,
   MarkCommentReplyAsRead,
@@ -53,6 +50,7 @@ import { UserService } from "../../services";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
+  RouteDataResponse,
   commentsToFlatNodes,
   editCommentReply,
   editMention,
@@ -92,6 +90,13 @@ enum ReplyEnum {
   Mention,
   Message,
 }
+
+type InboxData = RouteDataResponse<{
+  repliesRes: GetRepliesResponse;
+  mentionsRes: GetPersonMentionsResponse;
+  messagesRes: PrivateMessagesResponse;
+}>;
+
 type ReplyType = {
   id: number;
   type_: ReplyEnum;
@@ -114,7 +119,7 @@ interface InboxState {
 }
 
 export class Inbox extends Component<any, InboxState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<InboxData>(this.context);
   state: InboxState = {
     unreadOrAll: UnreadOrAll.Unread,
     messageType: MessageType.All,
@@ -162,7 +167,7 @@ export class Inbox extends Component<any, InboxState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [repliesRes, mentionsRes, messagesRes] = this.isoData.routeData;
+      const { mentionsRes, messagesRes, repliesRes } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
@@ -211,7 +216,7 @@ export class Inbox extends Component<any, InboxState> {
     const auth = myAuth();
     const inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined;
     return (
-      <div className="container-lg">
+      <div className="inbox container-lg">
         <div className="row">
           <div className="col-12">
             <HtmlTags
@@ -223,7 +228,7 @@ export class Inbox extends Component<any, InboxState> {
               {inboxRss && (
                 <small>
                   <a href={inboxRss} title="RSS" rel={relTags}>
-                    <Icon icon="rss" classes="ml-2 text-muted small" />
+                    <Icon icon="rss" classes="ms-2 text-muted small" />
                   </a>
                   <link
                     rel="alternate"
@@ -287,6 +292,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={UnreadOrAll.Unread}
             checked={this.state.unreadOrAll == UnreadOrAll.Unread}
             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
@@ -300,6 +306,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={UnreadOrAll.All}
             checked={this.state.unreadOrAll == UnreadOrAll.All}
             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
@@ -320,6 +327,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.All}
             checked={this.state.messageType == MessageType.All}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -333,6 +341,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.Replies}
             checked={this.state.messageType == MessageType.Replies}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -346,6 +355,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.Mentions}
             checked={this.state.messageType == MessageType.Mentions}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -359,6 +369,7 @@ export class Inbox extends Component<any, InboxState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.Messages}
             checked={this.state.messageType == MessageType.Messages}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -372,8 +383,8 @@ export class Inbox extends Component<any, InboxState> {
   selects() {
     return (
       <div className="mb-2">
-        <span className="mr-3">{this.unreadOrAllRadios()}</span>
+        <span className="me-3">{this.unreadOrAllRadios()}</span>
-        <span className="mr-3">{this.messageTypeRadios()}</span>
+        <span className="me-3">{this.messageTypeRadios()}</span>
         <CommentSortSelect
           sort={this.state.sort}
           onChange={this.handleSortChange}
@@ -686,50 +697,40 @@ export class Inbox extends Component<any, InboxState> {
     await i.refetch();
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     auth,
-  }: InitialFetchRequest): Promise<any>[] {
+  }: InitialFetchRequest): Promise<InboxData> {
-    const promises: Promise<RequestState<any>>[] = [];
-
     const sort: CommentSortType = "New";
 
-    if (auth) {
+    return {
-      // It can be /u/me, or /username/1
+      mentionsRes: auth
-      const repliesForm: GetReplies = {
+        ? await client.getPersonMentions({
             sort,
             unread_only: true,
             page: 1,
             limit: fetchLimit,
             auth,
-      };
+          })
-      promises.push(client.getReplies(repliesForm));
+        : { state: "empty" },
-
+      messagesRes: auth
-      const personMentionsForm: GetPersonMentions = {
+        ? await client.getPrivateMessages({
+            unread_only: true,
+            page: 1,
+            limit: fetchLimit,
+            auth,
+          })
+        : { state: "empty" },
+      repliesRes: auth
+        ? await client.getReplies({
             sort,
             unread_only: true,
             page: 1,
             limit: fetchLimit,
             auth,
+          })
+        : { state: "empty" },
     };
-      promises.push(client.getPersonMentions(personMentionsForm));
-
-      const privateMessagesForm: GetPrivateMessages = {
-        unread_only: true,
-        page: 1,
-        limit: fetchLimit,
-        auth,
-      };
-      promises.push(client.getPrivateMessages(privateMessagesForm));
-    } else {
-      promises.push(
-        Promise.resolve({ state: "empty" }),
-        Promise.resolve({ state: "empty" }),
-        Promise.resolve({ state: "empty" })
-      );
-    }
-
-    return promises;
   }
 
   async refetch() {

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

@@ -40,7 +40,7 @@ export class PasswordChange extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="password-change container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -58,7 +58,7 @@ export class PasswordChange extends Component<any, State> {
   passwordChangeForm() {
     return (
       <form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="new-password">
             {i18n.t("new_password")}
           </label>
@@ -74,7 +74,7 @@ export class PasswordChange extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="verify-password">
             {i18n.t("verify_password")}
           </label>
@@ -90,7 +90,7 @@ export class PasswordChange extends Component<any, State> {
             />
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-sm-10">
             <button type="submit" className="btn btn-secondary">
               {this.state.passwordChangeRes.state == "loading" ? (
@@ -140,7 +140,7 @@ export class PasswordChange extends Component<any, State> {
           UserService.Instance.myUserInfo = site.data.my_user;
         }
 
-        this.props.history.replace("/");
+        i.props.history.replace("/");
       }
     }
   }

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

@@ -107,19 +107,9 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
     setupTippy();
   }
 
-  // TODO wut?
-  // componentDidUpdate(lastProps: UserDetailsProps) {
-  //   for (const key of Object.keys(lastProps)) {
-  //     if (lastProps[key] !== this.props[key]) {
-  //       this.fetchUserData();
-  //       break;
-  //     }
-  //   }
-  // }
-
   render() {
     return (
-      <div>
+      <div className="person-details">
         {this.viewSelector(this.props.view)}
 
         <Paginator page={this.props.page} onChange={this.handlePageChange} />

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

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { Component } from "inferno";
 import { Link } from "inferno-router";
 import { Person } from "lemmy-js-client";
@@ -48,7 +49,13 @@ export class PersonListing extends Component<PersonListingProps, any> {
         {!this.props.realLink ? (
           <Link
             title={apubName}
-            className={this.props.muted ? "text-muted" : "text-info"}
+            className={classNames(
+              "person-listing d-inline-flex align-items-baseline",
+              {
+                "text-muted": this.props.muted,
+                "text-info": !this.props.muted,
+              }
+            )}
             to={link}
           >
             {this.avatarAndName(displayName)}
@@ -56,7 +63,9 @@ export class PersonListing extends Component<PersonListingProps, any> {
         ) : (
           <a
             title={apubName}
-            className={this.props.muted ? "text-muted" : "text-info"}
+            className={`person-listing d-inline-flex align-items-baseline ${
+              this.props.muted ? "text-muted" : "text-info"
+            }`}
             href={link}
             rel={relTags}
           >
@@ -73,10 +82,14 @@ export class PersonListing extends Component<PersonListingProps, any> {
     const avatar = this.props.person.avatar;
     return (
       <>
-        {avatar &&
+        {!this.props.hideAvatar &&
-          !this.props.hideAvatar &&
           !this.props.person.banned &&
-          showAvatars() && <PictrsImage src={avatar} icon />}
+          showAvatars() && (
+            <PictrsImage
+              src={avatar ?? "/static/assets/icons/icon-96x96.png"}
+              icon
+            />
+          )}
         <span>{displayName}</span>
       </>
     );

src/shared/components/person/profile.tsx

@@ -1,3 +1,6 @@
+import { getQueryParams, getQueryString } from "@utils/helpers";
+import { canMod, isAdmin, isBanned } from "@utils/roles";
+import type { QueryParams } from "@utils/types";
 import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
@@ -53,8 +56,7 @@ import { UserService } from "../../services";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
-  QueryParams,
+  RouteDataResponse,
-  canMod,
   capitalizeFirstLetter,
   editComment,
   editPost,
@@ -65,10 +67,6 @@ import {
   futureDaysToUnixTime,
   getCommentParentId,
   getPageFromString,
-  getQueryParams,
-  getQueryString,
-  isAdmin,
-  isBanned,
   mdToHtml,
   myAuth,
   myAuthRequired,
@@ -90,6 +88,10 @@ import { CommunityLink } from "../community/community-link";
 import { PersonDetails } from "./person-details";
 import { PersonListing } from "./person-listing";
 
+type ProfileData = RouteDataResponse<{
+  personResponse: GetPersonDetailsResponse;
+}>;
+
 interface ProfileState {
   personRes: RequestState<GetPersonDetailsResponse>;
   personBlocked: boolean;
@@ -156,7 +158,7 @@ export class Profile extends Component<
   RouteComponentProps<{ username: string }>,
   ProfileState
 > {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<ProfileData>(this.context);
   state: ProfileState = {
     personRes: { state: "empty" },
     personBlocked: false,
@@ -208,7 +210,7 @@ export class Profile extends Component<
     if (FirstLoadService.isFirstLoad) {
       this.state = {
         ...this.state,
-        personRes: this.isoData.routeData[0],
+        personRes: this.isoData.routeData.personResponse,
         isIsomorphic: true,
       };
     }
@@ -267,14 +269,12 @@ export class Profile extends Component<
     }
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     path,
     query: { page, sort, view: urlView },
     auth,
-  }: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<
+  }: InitialFetchRequest<QueryParams<ProfileProps>>): Promise<ProfileData> {
-    RequestState<any>
-  >[] {
     const pathSplit = path.split("/");
 
     const username = pathSplit[2];
@@ -289,7 +289,9 @@ export class Profile extends Component<
       auth,
     };
 
-    return [client.getPersonDetails(form)];
+    return {
+      personResponse: await client.getPersonDetails(form),
+    };
   }
 
   get documentTitle(): string {
@@ -384,7 +386,11 @@ export class Profile extends Component<
   }
 
   render() {
-    return <div className="container-lg">{this.renderPersonRes()}</div>;
+    return (
+      <div className="person-profile container-lg">
+        {this.renderPersonRes()}
+      </div>
+    );
   }
 
   get viewRadios() {
@@ -410,6 +416,7 @@ export class Profile extends Component<
       >
         <input
           type="radio"
+          className="btn-check"
           value={view}
           checked={active}
           onChange={linkEvent(this, this.handleViewChange)}
@@ -427,7 +434,7 @@ export class Profile extends Component<
 
     return (
       <div className="mb-2">
-        <span className="mr-3">{this.viewRadios}</span>
+        <span className="me-3">{this.viewRadios}</span>
         <SortSelect
           sort={sort}
           onChange={this.handleSortChange}
@@ -476,22 +483,22 @@ export class Profile extends Component<
                       />
                     </li>
                     {isBanned(pv.person) && (
-                      <li className="list-inline-item badge badge-danger">
+                      <li className="list-inline-item badge text-bg-danger">
                         {i18n.t("banned")}
                       </li>
                     )}
                     {pv.person.deleted && (
-                      <li className="list-inline-item badge badge-danger">
+                      <li className="list-inline-item badge text-bg-danger">
                         {i18n.t("deleted")}
                       </li>
                     )}
                     {pv.person.admin && (
-                      <li className="list-inline-item badge badge-light">
+                      <li className="list-inline-item badge text-bg-light">
                         {i18n.t("admin")}
                       </li>
                     )}
                     {pv.person.bot_account && (
-                      <li className="list-inline-item badge badge-light">
+                      <li className="list-inline-item badge text-bg-light">
                         {i18n.t("bot_account").toLowerCase()}
                       </li>
                     )}
@@ -502,7 +509,7 @@ export class Profile extends Component<
                 {!this.amCurrentUser && UserService.Instance.myUserInfo && (
                   <>
                     <a
-                      className={`d-flex align-self-start btn btn-secondary mr-2 ${
+                      className={`d-flex align-self-start btn btn-secondary me-2 ${
                         !pv.person.matrix_user_id && "invisible"
                       }`}
                       rel={relTags}
@@ -512,7 +519,7 @@ export class Profile extends Component<
                     </a>
                     <Link
                       className={
-                        "d-flex align-self-start btn btn-secondary mr-2"
+                        "d-flex align-self-start btn btn-secondary me-2"
                       }
                       to={`/create_private_message/${pv.person.id}`}
                     >
@@ -521,7 +528,7 @@ export class Profile extends Component<
                     {personBlocked ? (
                       <button
                         className={
-                          "d-flex align-self-start btn btn-secondary mr-2"
+                          "d-flex align-self-start btn btn-secondary me-2"
                         }
                         onClick={linkEvent(
                           pv.person.id,
@@ -533,7 +540,7 @@ export class Profile extends Component<
                     ) : (
                       <button
                         className={
-                          "d-flex align-self-start btn btn-secondary mr-2"
+                          "d-flex align-self-start btn btn-secondary me-2"
                         }
                         onClick={linkEvent(
                           pv.person.id,
@@ -552,7 +559,7 @@ export class Profile extends Component<
                   (!isBanned(pv.person) ? (
                     <button
                       className={
-                        "d-flex align-self-start btn btn-secondary mr-2"
+                        "d-flex align-self-start btn btn-secondary me-2"
                       }
                       onClick={linkEvent(this, this.handleModBanShow)}
                       aria-label={i18n.t("ban")}
@@ -562,7 +569,7 @@ export class Profile extends Component<
                   ) : (
                     <button
                       className={
-                        "d-flex align-self-start btn btn-secondary mr-2"
+                        "d-flex align-self-start btn btn-secondary me-2"
                       }
                       onClick={linkEvent(this, this.handleModBanSubmit)}
                       aria-label={i18n.t("unban")}
@@ -581,13 +588,13 @@ export class Profile extends Component<
               )}
               <div>
                 <ul className="list-inline mb-2">
-                  <li className="list-inline-item badge badge-light">
+                  <li className="list-inline-item badge text-bg-light">
                     {i18n.t("number_of_posts", {
                       count: Number(pv.counts.post_count),
                       formattedCount: numToSI(pv.counts.post_count),
                     })}
                   </li>
-                  <li className="list-inline-item badge badge-light">
+                  <li className="list-inline-item badge text-bg-light">
                     {i18n.t("number_of_comments", {
                       count: Number(pv.counts.comment_count),
                       formattedCount: numToSI(pv.counts.comment_count),
@@ -605,7 +612,7 @@ export class Profile extends Component<
               </div>
               <div className="d-flex align-items-center text-muted mb-2">
                 <Icon icon="cake" />
-                <span className="ml-2">
+                <span className="ms-2">
                   {i18n.t("cake_day_title")}{" "}
                   {moment
                     .utc(pv.person.published)
@@ -631,14 +638,14 @@ export class Profile extends Component<
     return (
       showBanDialog && (
         <form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
-          <div className="form-group row col-12">
+          <div className="mb-3 row col-12">
             <label className="col-form-label" htmlFor="profile-ban-reason">
               {i18n.t("reason")}
             </label>
             <input
               type="text"
               id="profile-ban-reason"
-              className="form-control mr-2"
+              className="form-control me-2"
               placeholder={i18n.t("reason")}
               value={this.state.banReason}
               onInput={linkEvent(this, this.handleModBanReasonChange)}
@@ -649,12 +656,12 @@ export class Profile extends Component<
             <input
               type="number"
               id={`mod-ban-expires`}
-              className="form-control mr-2"
+              className="form-control me-2"
               placeholder={i18n.t("number_of_days")}
               value={this.state.banExpireDays}
               onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
             />
-            <div className="form-group">
+            <div className="input-group mb-3">
               <div className="form-check">
                 <input
                   className="form-check-input"
@@ -674,14 +681,14 @@ export class Profile extends Component<
             </div>
           </div>
           {/* TODO hold off on expires until later */}
-          {/* <div class="form-group row"> */}
+          {/* <div class="mb-3 row"> */}
           {/*   <label class="col-form-label">Expires</label> */}
-          {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
+          {/*   <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
           {/* </div> */}
-          <div className="form-group row">
+          <div className="mb-3 row">
             <button
               type="reset"
-              className="btn btn-secondary mr-2"
+              className="btn btn-secondary me-2"
               aria-label={i18n.t("cancel")}
               onClick={linkEvent(this, this.handleModBanSubmitCancel)}
             >

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

@@ -2,7 +2,6 @@ import { Component, linkEvent } from "inferno";
 import {
   ApproveRegistrationApplication,
   GetSiteResponse,
-  ListRegistrationApplications,
   ListRegistrationApplicationsResponse,
   RegistrationApplicationView,
 } from "lemmy-js-client";
@@ -12,6 +11,7 @@ import { UserService } from "../../services";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
+  RouteDataResponse,
   editRegistrationApplication,
   fetchLimit,
   myAuthRequired,
@@ -28,6 +28,10 @@ enum UnreadOrAll {
   All,
 }
 
+type RegistrationApplicationsData = RouteDataResponse<{
+  listRegistrationApplicationsResponse: ListRegistrationApplicationsResponse;
+}>;
+
 interface RegistrationApplicationsState {
   appsRes: RequestState<ListRegistrationApplicationsResponse>;
   siteRes: GetSiteResponse;
@@ -40,7 +44,7 @@ export class RegistrationApplications extends Component<
   any,
   RegistrationApplicationsState
 > {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<RegistrationApplicationsData>(this.context);
   state: RegistrationApplicationsState = {
     appsRes: { state: "empty" },
     siteRes: this.isoData.site_res,
@@ -59,7 +63,7 @@ export class RegistrationApplications extends Component<
     if (FirstLoadService.isFirstLoad) {
       this.state = {
         ...this.state,
-        appsRes: this.isoData.routeData[0],
+        appsRes: this.isoData.routeData.listRegistrationApplicationsResponse,
         isIsomorphic: true,
       };
     }
@@ -113,7 +117,11 @@ export class RegistrationApplications extends Component<
   }
 
   render() {
-    return <div className="container-lg">{this.renderApps()}</div>;
+    return (
+      <div className="registration-applications container-lg">
+        {this.renderApps()}
+      </div>
+    );
   }
 
   unreadOrAllRadios() {
@@ -126,6 +134,7 @@ export class RegistrationApplications extends Component<
         >
           <input
             type="radio"
+            className="btn-check"
             value={UnreadOrAll.Unread}
             checked={this.state.unreadOrAll == UnreadOrAll.Unread}
             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
@@ -139,6 +148,7 @@ export class RegistrationApplications extends Component<
         >
           <input
             type="radio"
+            className="btn-check"
             value={UnreadOrAll.All}
             checked={this.state.unreadOrAll == UnreadOrAll.All}
             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
@@ -152,7 +162,7 @@ export class RegistrationApplications extends Component<
   selects() {
     return (
       <div className="mb-2">
-        <span className="mr-3">{this.unreadOrAllRadios()}</span>
+        <span className="me-3">{this.unreadOrAllRadios()}</span>
       </div>
     );
   }
@@ -184,25 +194,20 @@ export class RegistrationApplications extends Component<
     this.refetch();
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     auth,
     client,
-  }: InitialFetchRequest): Promise<any>[] {
+  }: InitialFetchRequest): Promise<RegistrationApplicationsData> {
-    const promises: Promise<RequestState<any>>[] = [];
+    return {
-
+      listRegistrationApplicationsResponse: auth
-    if (auth) {
+        ? await client.listRegistrationApplications({
-      const form: ListRegistrationApplications = {
             unread_only: true,
             page: 1,
             limit: fetchLimit,
-        auth,
+            auth: auth as string,
+          })
+        : { state: "empty" },
     };
-      promises.push(client.listRegistrationApplications(form));
-    } else {
-      promises.push(Promise.resolve({ state: "empty" }));
-    }
-
-    return promises;
   }
 
   async refetch() {

src/shared/components/person/reports.tsx

@@ -1,3 +1,4 @@
+import { amAdmin } from "@utils/roles";
 import { Component, linkEvent } from "inferno";
 import {
   CommentReportResponse,
@@ -23,7 +24,7 @@ import { HttpService, UserService } from "../../services";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { RequestState } from "../../services/HttpService";
 import {
-  amAdmin,
+  RouteDataResponse,
   editCommentReport,
   editPostReport,
   editPrivateMessageReport,
@@ -56,6 +57,12 @@ enum MessageEnum {
   PrivateMessageReport,
 }
 
+type ReportsData = RouteDataResponse<{
+  commentReportsRes: ListCommentReportsResponse;
+  postReportsRes: ListPostReportsResponse;
+  messageReportsRes: ListPrivateMessageReportsResponse;
+}>;
+
 type ItemType = {
   id: number;
   type_: MessageEnum;
@@ -75,7 +82,7 @@ interface ReportsState {
 }
 
 export class Reports extends Component<any, ReportsState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<ReportsData>(this.context);
   state: ReportsState = {
     commentReportsRes: { state: "empty" },
     postReportsRes: { state: "empty" },
@@ -99,8 +106,9 @@ export class Reports extends Component<any, ReportsState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [commentReportsRes, postReportsRes, messageReportsRes] =
+      const { commentReportsRes, postReportsRes, messageReportsRes } =
         this.isoData.routeData;
+
       this.state = {
         ...this.state,
         commentReportsRes,
@@ -111,7 +119,7 @@ export class Reports extends Component<any, ReportsState> {
       if (amAdmin()) {
         this.state = {
           ...this.state,
-          messageReportsRes,
+          messageReportsRes: messageReportsRes,
         };
       }
     }
@@ -134,7 +142,7 @@ export class Reports extends Component<any, ReportsState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="person-reports container-lg">
         <div className="row">
           <div className="col-12">
             <HtmlTags
@@ -185,6 +193,7 @@ export class Reports extends Component<any, ReportsState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={UnreadOrAll.Unread}
             checked={this.state.unreadOrAll == UnreadOrAll.Unread}
             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
@@ -198,6 +207,7 @@ export class Reports extends Component<any, ReportsState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={UnreadOrAll.All}
             checked={this.state.unreadOrAll == UnreadOrAll.All}
             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
@@ -218,6 +228,7 @@ export class Reports extends Component<any, ReportsState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.All}
             checked={this.state.messageType == MessageType.All}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -231,6 +242,7 @@ export class Reports extends Component<any, ReportsState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.CommentReport}
             checked={this.state.messageType == MessageType.CommentReport}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -244,6 +256,7 @@ export class Reports extends Component<any, ReportsState> {
         >
           <input
             type="radio"
+            className="btn-check"
             value={MessageType.PostReport}
             checked={this.state.messageType == MessageType.PostReport}
             onChange={linkEvent(this, this.handleMessageTypeChange)}
@@ -261,6 +274,7 @@ export class Reports extends Component<any, ReportsState> {
           >
             <input
               type="radio"
+              className="btn-check"
               value={MessageType.PrivateMessageReport}
               checked={
                 this.state.messageType == MessageType.PrivateMessageReport
@@ -277,8 +291,8 @@ export class Reports extends Component<any, ReportsState> {
   selects() {
     return (
       <div className="mb-2">
-        <span className="mr-3">{this.unreadOrAllRadios()}</span>
+        <span className="me-3">{this.unreadOrAllRadios()}</span>
-        <span className="mr-3">{this.messageTypeRadios()}</span>
+        <span className="me-3">{this.messageTypeRadios()}</span>
       </div>
     );
   }
@@ -481,55 +495,48 @@ export class Reports extends Component<any, ReportsState> {
     await i.refetch();
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     auth,
     client,
-  }: InitialFetchRequest): Promise<any>[] {
+  }: InitialFetchRequest): Promise<ReportsData> {
-    const promises: Promise<RequestState<any>>[] = [];
-
     const unresolved_only = true;
     const page = 1;
     const limit = fetchLimit;
 
-    if (auth) {
     const commentReportsForm: ListCommentReports = {
       unresolved_only,
       page,
       limit,
-        auth,
+      auth: auth as string,
     };
-      promises.push(client.listCommentReports(commentReportsForm));
 
     const postReportsForm: ListPostReports = {
       unresolved_only,
       page,
       limit,
-        auth,
+      auth: auth as string,
+    };
+
+    const data: ReportsData = {
+      commentReportsRes: await client.listCommentReports(commentReportsForm),
+      postReportsRes: await client.listPostReports(postReportsForm),
+      messageReportsRes: { state: "empty" },
     };
-      promises.push(client.listPostReports(postReportsForm));
 
     if (amAdmin()) {
       const privateMessageReportsForm: ListPrivateMessageReports = {
         unresolved_only,
         page,
         limit,
-          auth,
+        auth: auth as string,
       };
-        promises.push(
+
-          client.listPrivateMessageReports(privateMessageReportsForm)
+      data.messageReportsRes = await client.listPrivateMessageReports(
-        );
+        privateMessageReportsForm
-      } else {
-        promises.push(Promise.resolve({ state: "empty" }));
-      }
-    } else {
-      promises.push(
-        Promise.resolve({ state: "empty" }),
-        Promise.resolve({ state: "empty" }),
-        Promise.resolve({ state: "empty" })
       );
     }
 
-    return promises;
+    return data;
   }
 
   async refetch() {

src/shared/components/person/settings.tsx

@@ -1,3 +1,4 @@
+import { debounce } from "@utils/helpers";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import {
@@ -18,10 +19,8 @@ import {
   Choice,
   capitalizeFirstLetter,
   communityToChoice,
-  debounce,
   elementUrl,
   emDash,
-  enableNsfw,
   fetchCommunities,
   fetchThemeList,
   fetchUsers,
@@ -111,7 +110,7 @@ const Filter = ({
   onChange: (choice: Choice) => void;
   loading: boolean;
 }) => (
-  <div className="form-group row">
+  <div className="mb-3 row">
     <label
       className="col-md-4 col-form-label"
       htmlFor={`block-${filterType}-filter`}
@@ -241,7 +240,7 @@ export class Settings extends Component<any, SettingsState> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="person-settings container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -305,7 +304,7 @@ export class Settings extends Component<any, SettingsState> {
       <>
         <h5>{i18n.t("change_password")}</h5>
         <form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-sm-5 col-form-label" htmlFor="user-password">
               {i18n.t("new_password")}
             </label>
@@ -321,7 +320,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label
               className="col-sm-5 col-form-label"
               htmlFor="user-verify-password"
@@ -340,7 +339,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label
               className="col-sm-5 col-form-label"
               htmlFor="user-old-password"
@@ -359,8 +358,11 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group">
+          <div className="input-group mb-3">
-            <button type="submit" className="btn btn-block btn-secondary mr-4">
+            <button
+              type="submit"
+              className="btn d-block btn-secondary me-4 w-100"
+            >
               {this.state.changePasswordRes.state === "loading" ? (
                 <Spinner />
               ) : (
@@ -468,11 +470,11 @@ export class Settings extends Component<any, SettingsState> {
       <>
         <h5>{i18n.t("settings")}</h5>
         <form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
-          <div className="form-group row">
+          <div className="mb-3 row">
-            <label className="col-sm-5 col-form-label" htmlFor="display-name">
+            <label className="col-sm-3 col-form-label" htmlFor="display-name">
               {i18n.t("display_name")}
             </label>
-            <div className="col-sm-7">
+            <div className="col-sm-9">
               <input
                 id="display-name"
                 type="text"
@@ -485,7 +487,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-sm-3 col-form-label" htmlFor="user-bio">
               {i18n.t("bio")}
             </label>
@@ -500,7 +502,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-sm-3 col-form-label" htmlFor="user-email">
               {i18n.t("email")}
             </label>
@@ -516,13 +518,13 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="mb-3 row">
-            <label className="col-sm-5 col-form-label" htmlFor="matrix-user-id">
+            <label className="col-sm-3 col-form-label" htmlFor="matrix-user-id">
               <a href={elementUrl} rel={relTags}>
                 {i18n.t("matrix_user_id")}
               </a>
             </label>
-            <div className="col-sm-7">
+            <div className="col-sm-9">
               <input
                 id="matrix-user-id"
                 type="text"
@@ -534,8 +536,10 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="mb-3 row">
-            <label className="col-sm-3">{i18n.t("avatar")}</label>
+            <label className="col-sm-3 col-form-label">
+              {i18n.t("avatar")}
+            </label>
             <div className="col-sm-9">
               <ImageUploadForm
                 uploadTitle={i18n.t("upload_avatar")}
@@ -546,8 +550,10 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="mb-3 row">
-            <label className="col-sm-3">{i18n.t("banner")}</label>
+            <label className="col-sm-3 col-form-label">
+              {i18n.t("banner")}
+            </label>
             <div className="col-sm-9">
               <ImageUploadForm
                 uploadTitle={i18n.t("upload_banner")}
@@ -557,8 +563,8 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="mb-3 row">
-            <label className="col-sm-3" htmlFor="user-language">
+            <label className="col-sm-3 form-label" htmlFor="user-language">
               {i18n.t("interface_language")}
             </label>
             <div className="col-sm-9">
@@ -566,7 +572,7 @@ export class Settings extends Component<any, SettingsState> {
                 id="user-language"
                 value={this.state.saveUserSettingsForm.interface_language}
                 onChange={linkEvent(this, this.handleInterfaceLangChange)}
-                className="custom-select w-auto"
+                className="form-select d-inline-block w-auto"
               >
                 <option disabled aria-hidden="true">
                   {i18n.t("interface_language")}
@@ -594,8 +600,8 @@ export class Settings extends Component<any, SettingsState> {
             showSite
             onChange={this.handleDiscussionLanguageChange}
           />
-          <div className="form-group row">
+          <div className="mb-3 row">
-            <label className="col-sm-3" htmlFor="user-theme">
+            <label className="col-sm-3 col-form-label" htmlFor="user-theme">
               {i18n.t("theme")}
             </label>
             <div className="col-sm-9">
@@ -603,7 +609,7 @@ export class Settings extends Component<any, SettingsState> {
                 id="user-theme"
                 value={this.state.saveUserSettingsForm.theme}
                 onChange={linkEvent(this, this.handleThemeChange)}
-                className="custom-select w-auto"
+                className="form-select d-inline-block w-auto"
               >
                 <option disabled aria-hidden="true">
                   {i18n.t("theme")}
@@ -617,8 +623,8 @@ export class Settings extends Component<any, SettingsState> {
               </select>
             </div>
           </div>
-          <form className="form-group row">
+          <form className="mb-3 row">
-            <label className="col-sm-3">{i18n.t("type")}</label>
+            <label className="col-sm-3 col-form-label">{i18n.t("type")}</label>
             <div className="col-sm-9">
               <ListingTypeSelect
                 type_={
@@ -631,8 +637,10 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </form>
-          <form className="form-group row">
+          <form className="mb-3 row">
-            <label className="col-sm-3">{i18n.t("sort_type")}</label>
+            <label className="col-sm-3 col-form-label">
+              {i18n.t("sort_type")}
+            </label>
             <div className="col-sm-9">
               <SortSelect
                 sort={
@@ -642,8 +650,7 @@ export class Settings extends Component<any, SettingsState> {
               />
             </div>
           </form>
-          {enableNsfw(this.state.siteRes) && (
+          <div className="input-group mb-3">
-            <div className="form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -657,8 +664,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          )}
+          <div className="input-group mb-3">
-          <div className="form-group">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -672,7 +678,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="input-group mb-3">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -686,7 +692,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="input-group mb-3">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -700,7 +706,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="input-group mb-3">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -717,7 +723,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="input-group mb-3">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -734,7 +740,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="input-group mb-3">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -751,7 +757,7 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
-          <div className="form-group">
+          <div className="input-group mb-3">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -775,8 +781,8 @@ export class Settings extends Component<any, SettingsState> {
             </div>
           </div>
           {this.totpSection()}
-          <div className="form-group">
+          <div className="input-group mb-3">
-            <button type="submit" className="btn btn-block btn-secondary mr-4">
+            <button type="submit" className="btn d-block btn-secondary me-4">
               {this.state.saveRes.state === "loading" ? (
                 <Spinner />
               ) : (
@@ -785,9 +791,9 @@ export class Settings extends Component<any, SettingsState> {
             </button>
           </div>
           <hr />
-          <div className="form-group">
+          <div className="input-group mb-3">
             <button
-              className="btn btn-block btn-danger"
+              className="btn d-block btn-danger"
               onClick={linkEvent(
                 this,
                 this.handleDeleteAccountShowConfirmToggle
@@ -812,7 +818,7 @@ export class Settings extends Component<any, SettingsState> {
                   className="form-control my-2"
                 />
                 <button
-                  className="btn btn-danger mr-4"
+                  className="btn btn-danger me-4"
                   disabled={!this.state.deleteAccountForm.password}
                   onClick={linkEvent(this, this.handleDeleteAccount)}
                 >
@@ -846,7 +852,7 @@ export class Settings extends Component<any, SettingsState> {
     return (
       <>
         {!totpUrl && (
-          <div className="form-group">
+          <div className="input-group mb-3">
             <div className="form-check">
               <input
                 className="form-check-input"
@@ -869,7 +875,7 @@ export class Settings extends Component<any, SettingsState> {
                 {i18n.t("two_factor_link")}
               </a>
             </div>
-            <div className="form-group">
+            <div className="input-group mb-3">
               <div className="form-check">
                 <input
                   className="form-check-input"

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

@@ -52,7 +52,7 @@ export class VerifyEmail extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="verfy-email container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

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

@@ -1,8 +1,11 @@
+import { getQueryParams } from "@utils/helpers";
+import type { QueryParams } from "@utils/types";
 import { Component } from "inferno";
 import { RouteComponentProps } from "inferno-router/dist/Route";
 import {
   CreatePost as CreatePostI,
   GetCommunity,
+  GetCommunityResponse,
   GetSiteResponse,
   ListCommunitiesResponse,
 } from "lemmy-js-client";
@@ -16,11 +19,10 @@ import {
 } from "../../services/HttpService";
 import {
   Choice,
-  QueryParams,
+  RouteDataResponse,
   enableDownvotes,
   enableNsfw,
   getIdFromString,
-  getQueryParams,
   myAuth,
   setIsoData,
 } from "../../utils";
@@ -32,6 +34,11 @@ export interface CreatePostProps {
   communityId?: number;
 }
 
+type CreatePostData = RouteDataResponse<{
+  communityResponse: GetCommunityResponse;
+  initialCommunitiesRes: ListCommunitiesResponse;
+}>;
+
 function getCreatePostQueryParams() {
   return getQueryParams<CreatePostProps>({
     communityId: getIdFromString,
@@ -54,7 +61,7 @@ export class CreatePost extends Component<
   RouteComponentProps<Record<string, never>>,
   CreatePostState
 > {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<CreatePostData>(this.context);
   state: CreatePostState = {
     siteRes: this.isoData.site_res,
     loading: true,
@@ -71,7 +78,15 @@ export class CreatePost extends Component<
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [communityRes, listCommunitiesRes] = this.isoData.routeData;
+      const { communityResponse: communityRes, initialCommunitiesRes } =
+        this.isoData.routeData;
+
+      this.state = {
+        ...this.state,
+        loading: false,
+        initialCommunitiesRes,
+        isIsomorphic: true,
+      };
 
       if (communityRes?.state === "success") {
         const communityChoice: Choice = {
@@ -84,13 +99,6 @@ export class CreatePost extends Component<
           selectedCommunityChoice: communityChoice,
         };
       }
-
-      this.state = {
-        ...this.state,
-        loading: false,
-        initialCommunitiesRes: listCommunitiesRes,
-        isIsomorphic: true,
-      };
     }
   }
 
@@ -155,7 +163,7 @@ export class CreatePost extends Component<
       | undefined;
 
     return (
-      <div className="container-lg">
+      <div className="create-post container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -166,7 +174,10 @@ export class CreatePost extends Component<
           </h5>
         ) : (
           <div className="row">
-            <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+            <div
+              id="createPostForm"
+              className="col-12 col-lg-6 offset-lg-3 mb-4"
+            >
               <h5>{i18n.t("create_post")}</h5>
               <PostForm
                 onCreate={this.handlePostCreate}
@@ -231,14 +242,17 @@ export class CreatePost extends Component<
     }
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     query: { communityId },
     auth,
-  }: InitialFetchRequest<QueryParams<CreatePostProps>>): Promise<
+  }: InitialFetchRequest<
-    RequestState<any>
+    QueryParams<CreatePostProps>
-  >[] {
+  >): Promise<CreatePostData> {
-    const promises: Promise<RequestState<any>>[] = [];
+    const data: CreatePostData = {
+      initialCommunitiesRes: await fetchCommunitiesForOptions(client),
+      communityResponse: { state: "empty" },
+    };
 
     if (communityId) {
       const form: GetCommunity = {
@@ -246,13 +260,9 @@ export class CreatePost extends Component<
         id: getIdFromString(communityId),
       };
 
-      promises.push(client.getCommunity(form));
+      data.communityResponse = await client.getCommunity(form);
-    } else {
-      promises.push(Promise.resolve({ state: "empty" }));
     }
 
-    promises.push(fetchCommunitiesForOptions(client));
+    return data;
-
-    return promises;
   }
 }

src/shared/components/post/metadata-card.tsx

@@ -30,7 +30,7 @@ export class MetadataCard extends Component<
     return (
       <>
         {!this.state.expanded && post.embed_title && post.url && (
-          <div className="card border-secondary mt-3 mb-2">
+          <div className="post-metadata-card card border-secondary mt-3 mb-2">
             <div className="row">
               <div className="col-12">
                 <div className="card-body">
@@ -41,14 +41,14 @@ export class MetadataCard extends Component<
                           {post.embed_title}
                         </a>
                       </h5>
-                      <span className="d-inline-block ml-2 mb-2 small text-muted">
+                      <span className="d-inline-block ms-2 mb-2 small text-muted">
                         <a
                           className="text-muted font-italic"
                           href={post.url}
                           rel={relTags}
                         >
                           {new URL(post.url).hostname}
-                          <Icon icon="external-link" classes="ml-1" />
+                          <Icon icon="external-link" classes="ms-1" />
                         </a>
                       </span>
                     </>
@@ -75,7 +75,10 @@ export class MetadataCard extends Component<
           </div>
         )}
         {this.state.expanded && post.embed_video_url && (
-          <iframe src={post.embed_video_url}></iframe>
+          <iframe
+            className="post-metadata-iframe"
+            src={post.embed_video_url}
+          ></iframe>
         )}
       </>
     );

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

@@ -1,3 +1,4 @@
+import { debounce } from "@utils/helpers";
 import autosize from "autosize";
 import { Component, InfernoNode, linkEvent } from "inferno";
 import {
@@ -18,7 +19,6 @@ import {
   archiveTodayUrl,
   capitalizeFirstLetter,
   communityToChoice,
-  debounce,
   fetchCommunities,
   getIdFromString,
   ghostArchiveUrl,
@@ -193,7 +193,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     // !!this.state.form.name || !!this.state.form.url || !!this.state.form.body;
     // <Prompt when={promptCheck} message={i18n.t("block_leaving")} />
     return (
-      <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
+      <form
+        className="post-form"
+        onSubmit={linkEvent(this, this.handlePostSubmit)}
+      >
         <NavigationPrompt
           when={
             !!(
@@ -203,7 +206,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             ) && !this.state.submitted
           }
         />
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="post-url">
             {i18n.t("url")}
           </label>
@@ -241,7 +244,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               <div>
                 <a
                   href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
-                  className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
+                  className="me-2 d-inline-block float-right text-muted small font-weight-bold"
                   rel={relTags}
                 >
                   archive.org {i18n.t("archive_link")}
@@ -250,7 +253,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
                     url
                   )}`}
-                  className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
+                  className="me-2 d-inline-block float-right text-muted small font-weight-bold"
                   rel={relTags}
                 >
                   ghostarchive.org {i18n.t("archive_link")}
@@ -259,7 +262,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
                     url
                   )}`}
-                  className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
+                  className="me-2 d-inline-block float-right text-muted small font-weight-bold"
                   rel={relTags}
                 >
                   archive.today {i18n.t("archive_link")}
@@ -277,7 +280,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 aria-label={i18n.t("delete")}
                 data-tippy-content={i18n.t("delete")}
               >
-                <Icon icon="x" classes="icon-inline mr-1" />
+                <Icon icon="x" classes="icon-inline me-1" />
                 {capitalizeFirstLetter(i18n.t("delete"))}
               </button>
             )}
@@ -316,7 +319,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             )}
           </div>
         </div>
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="post-title">
             {i18n.t("title")}
           </label>
@@ -342,7 +345,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label">{i18n.t("body")}</label>
           <div className="col-sm-10">
             <MarkdownTextArea
@@ -355,7 +358,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           </div>
         </div>
         {!this.props.post_view && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-sm-2 col-form-label" htmlFor="post-community">
               {i18n.t("community")}
             </label>
@@ -378,7 +381,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           </div>
         )}
         {this.props.enableNsfw && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <legend className="col-form-label col-sm-2 pt-0">
               {i18n.t("nsfw")}
             </legend>
@@ -412,12 +415,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           value={this.state.form.honeypot}
           onInput={linkEvent(this, this.handleHoneyPotChange)}
         />
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="col-sm-10">
             <button
               disabled={!this.state.form.community_id || this.state.loading}
               type="submit"
-              className="btn btn-secondary mr-2"
+              className="btn btn-secondary me-2"
             >
               {this.state.loading ? (
                 <Spinner />

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

@@ -1,3 +1,14 @@
+import { canShare, share } from "@utils/browser";
+import {
+  amAdmin,
+  amCommunityCreator,
+  amMod,
+  canAdmin,
+  canMod,
+  isAdmin,
+  isBanned,
+  isMod,
+} from "@utils/roles";
 import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { Link } from "inferno-router";
@@ -28,18 +39,9 @@ import { i18n } from "../../i18next";
 import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
 import { UserService } from "../../services";
 import {
-  amAdmin,
-  amCommunityCreator,
-  amMod,
-  canAdmin,
-  canMod,
-  canShare,
   futureDaysToUnixTime,
   hostname,
-  isAdmin,
-  isBanned,
   isImage,
-  isMod,
   isVideo,
   mdNoImages,
   mdToHtml,
@@ -49,7 +51,6 @@ import {
   numToSI,
   relTags,
   setupTippy,
-  share,
   showScores,
 } from "../../utils";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
@@ -201,7 +202,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
 
     return (
-      <div className="post-listing">
+      <div className="post-listing mt-2">
         {!this.state.showEdit ? (
           <>
             {this.listing()}
@@ -230,13 +231,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   body() {
     const body = this.postView.post.body;
     return body ? (
-      <div className="col-12 card my-2 p-2">
+      <article id="postContent" className="col-12 card my-2 p-2">
         {this.state.viewSource ? (
           <pre>{body}</pre>
         ) : (
           <div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
         )}
-      </div>
+      </article>
     ) : (
       <></>
     );
@@ -367,33 +368,31 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   createdLine() {
     const post_view = this.postView;
-    const url = post_view.post.url;
-    const body = post_view.post.body;
     return (
-      <ul className="list-inline mb-1 text-muted small">
+      <ul className="list-inline mb-1 text-muted small mt-2">
         <li className="list-inline-item">
           <PersonListing person={post_view.creator} />
 
           {this.creatorIsMod_ && (
-            <span className="mx-1 badge">{i18n.t("mod")}</span>
+            <span className="mx-1 badge text-bg-light">{i18n.t("mod")}</span>
           )}
           {this.creatorIsAdmin_ && (
-            <span className="mx-1 badge">{i18n.t("admin")}</span>
+            <span className="mx-1 badge text-bg-light">{i18n.t("admin")}</span>
           )}
           {post_view.creator.bot_account && (
-            <span className="mx-1 badge">
+            <span className="mx-1 badge text-bg-light">
               {i18n.t("bot_account").toLowerCase()}
             </span>
           )}
           {this.props.showCommunity && (
-            <span>
+            <>
-              <span className="mx-1"> {i18n.t("to")} </span>
+              {" "}
-              <CommunityLink community={post_view.community} />
+              {i18n.t("to")} <CommunityLink community={post_view.community} />
-            </span>
+            </>
           )}
         </li>
         {post_view.post.language_id !== 0 && (
-          <span className="mx-1 badge">
+          <span className="mx-1 badge text-bg-light">
             {
               this.props.allLanguages.find(
                 lang => lang.id === post_view.post.language_id
@@ -402,21 +401,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           </span>
         )}
         <li className="list-inline-item">•</li>
-        {url && !(hostname(url) === getExternalHost()) && (
-          <>
-            <li className="list-inline-item">
-              <a
-                className="text-muted font-italic"
-                href={url}
-                title={url}
-                rel={relTags}
-              >
-                {hostname(url)}
-              </a>
-            </li>
-            <li className="list-inline-item">•</li>
-          </>
-        )}
         <li className="list-inline-item">
           <span>
             <MomentTime
@@ -425,28 +409,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             />
           </span>
         </li>
-        {body && (
-          <>
-            <li className="list-inline-item">•</li>
-            <li className="list-inline-item">
-              <button
-                className="text-muted btn btn-sm btn-link p-0"
-                data-tippy-content={mdNoImages.render(body)}
-                data-tippy-allowHtml={true}
-                onClick={linkEvent(this, this.handleShowBody)}
-              >
-                <Icon icon="book-open" classes="icon-inline mr-1" />
-              </button>
-            </li>
-          </>
-        )}
       </ul>
     );
   }
 
   voteBar() {
     return (
-      <div className={`vote-bar col-1 pr-0 small text-center`}>
+      <div className={`vote-bar col-1 pe-0 small text-center`}>
         <button
           className={`btn-animate btn btn-link p-0 ${
             this.postView.my_vote == 1 ? "text-info" : "text-muted"
@@ -464,7 +433,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         </button>
         {showScores() ? (
           <div
-            className={`unselectable pointer font-weight-bold text-muted px-1`}
+            className={`unselectable pointer text-muted px-1 post-score`}
             data-tippy-content={this.pointsTippy}
           >
             {numToSI(this.postView.counts.score)}
@@ -497,7 +466,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
     return (
       <Link
-        className={`d-inline-block ${
+        className={`d-inline ${
           !post.featured_community && !post.featured_local
             ? "text-body"
             : "text-primary"
@@ -505,8 +474,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         to={`/post/${post.id}`}
         title={i18n.t("comments")}
       >
-        <div
+        <span
-          className="d-inline-block"
+          className="d-inline"
           dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
         />
       </Link>
@@ -518,35 +487,29 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const url = post.url;
 
     return (
+      <>
         <div className="post-title overflow-hidden">
-        <h5>
+          <h5 className="d-inline">
-          {url ? (
+            {url && this.props.showBody ? (
-            this.props.showBody ? (
               <a
-                className={`d-inline-block ${
+                className={
                   !post.featured_community && !post.featured_local
                     ? "text-body"
                     : "text-primary"
-                }`}
+                }
                 href={url}
                 title={url}
                 rel={relTags}
-              >
-                <div
-                  className="d-inline-block"
                 dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
-                />
+              ></a>
-              </a>
-            ) : (
-              this.postLink
-            )
             ) : (
               this.postLink
             )}
+          </h5>
           {(url && isImage(url)) ||
             (post.thumbnail_url && (
               <button
-                className="btn btn-link text-monospace text-muted small d-inline-block"
+                className="btn btn-sm text-monospace text-muted d-inline-block"
                 data-tippy-content={i18n.t("expand_here")}
                 onClick={linkEvent(this, this.handleImageExpandClick)}
               >
@@ -559,13 +522,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               </button>
             ))}
           {post.removed && (
-            <small className="ml-2 text-muted font-italic">
+            <small className="ms-2 badge text-bg-secondary">
               {i18n.t("removed")}
             </small>
           )}
           {post.deleted && (
             <small
-              className="unselectable pointer ml-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted font-italic"
               data-tippy-content={i18n.t("deleted")}
             >
               <Icon icon="trash" classes="icon-inline text-danger" />
@@ -573,7 +536,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           )}
           {post.locked && (
             <small
-              className="unselectable pointer ml-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted font-italic"
               data-tippy-content={i18n.t("locked")}
             >
               <Icon icon="lock" classes="icon-inline text-danger" />
@@ -581,27 +544,50 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           )}
           {post.featured_community && (
             <small
-              className="unselectable pointer ml-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted font-italic"
-              data-tippy-content={i18n.t("featured")}
+              data-tippy-content={i18n.t("featured_in_community")}
+              aria-label={i18n.t("featured_in_community")}
             >
               <Icon icon="pin" classes="icon-inline text-primary" />
             </small>
           )}
           {post.featured_local && (
             <small
-              className="unselectable pointer ml-2 text-muted font-italic"
+              className="unselectable pointer ms-2 text-muted font-italic"
-              data-tippy-content={i18n.t("featured")}
+              data-tippy-content={i18n.t("featured_in_local")}
+              aria-label={i18n.t("featured_in_local")}
             >
               <Icon icon="pin" classes="icon-inline text-secondary" />
             </small>
           )}
           {post.nsfw && (
-            <small className="ml-2 text-muted font-italic">
+            <small className="ms-2 badge text-bg-danger">
               {i18n.t("nsfw")}
             </small>
           )}
-        </h5>
         </div>
+        {url && this.urlLine()}
+      </>
+    );
+  }
+
+  urlLine() {
+    const post = this.postView.post;
+    const url = post.url;
+
+    return (
+      <p className="d-flex text-muted align-items-center gap-1 small m-0">
+        {url && !(hostname(url) === getExternalHost()) && (
+          <a
+            className="text-muted font-italic"
+            href={url}
+            title={url}
+            rel={relTags}
+          >
+            {hostname(url)}
+          </a>
+        )}
+      </p>
     );
   }
 
@@ -610,9 +596,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     return dupes && dupes.length > 0 ? (
       <ul className="list-inline mb-1 small text-muted">
         <>
-          <li className="list-inline-item mr-2">{i18n.t("cross_posted_to")}</li>
+          <li className="list-inline-item me-2">{i18n.t("cross_posted_to")}</li>
           {dupes.map(pv => (
-            <li key={pv.post.id} className="list-inline-item mr-2">
+            <li key={pv.post.id} className="list-inline-item me-2">
               <Link to={`/post/${pv.post.id}`}>
                 {pv.community.local
                   ? pv.community.name
@@ -631,11 +617,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
 
     return (
-      <div className="d-flex justify-content-start flex-wrap text-muted font-weight-bold mb-1">
+      <div className="d-flex align-items-center justify-content-start flex-wrap text-muted">
         {this.commentsButton}
         {canShare() && (
           <button
-            className="btn btn-link"
+            className="btn btn-sm btn-animate text-muted py-0"
             onClick={linkEvent(this, this.handleShare)}
             type="button"
           >
@@ -644,7 +630,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         )}
         {!post.local && (
           <a
-            className="btn btn-link btn-animate text-muted py-0"
+            className="btn btn-sm btn-animate text-muted py-0"
             title={i18n.t("link")}
             href={post.ap_id}
           >
@@ -654,50 +640,94 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         {mobile && !this.props.viewOnly && this.mobileVotes}
         {UserService.Instance.myUserInfo &&
           !this.props.viewOnly &&
-          this.postActions(mobile)}
+          this.postActions()}
       </div>
     );
   }
 
-  postActions(mobile = false) {
+  showPreviewButton() {
+    const post_view = this.postView;
+    const body = post_view.post.body;
+
+    return (
+      <button
+        className="btn btn-sm btn-animate text-muted py-0"
+        data-tippy-content={body && mdNoImages.render(body)}
+        data-tippy-allowHtml={true}
+        onClick={linkEvent(this, this.handleShowBody)}
+      >
+        <Icon
+          icon="book-open"
+          classes={classNames("icon-inline me-1", {
+            "text-success": this.state.showBody,
+          })}
+        />
+      </button>
+    );
+  }
+
+  postActions() {
     // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
     // Possible enhancement: Make each button a component.
     const post_view = this.postView;
+    const post = post_view.post;
+
     return (
       <>
         {this.saveButton}
         {this.crossPostButton}
-        {mobile && this.showMoreButton}
+
-        {(!mobile || this.state.showAdvanced) && (
+        {/**
-          <>
+         * If there is a URL, or if the post has a body and we were told not to
-            {!this.myPost && (
+         * show the body, show the MetadataCard/body toggle.
-              <>
+         */}
-                {this.reportButton}
+        {(post.url || (post.body && !this.props.showBody)) &&
-                {this.blockButton}
+          this.showPreviewButton()}
-              </>
+
-            )}
-            {this.myPost && (this.showBody || this.state.showAdvanced) && (
-              <>
-                {this.editButton}
-                {this.deleteButton}
-              </>
-            )}
-          </>
-        )}
-        {this.state.showAdvanced && (
-          <>
         {this.showBody && post_view.post.body && this.viewSourceButton}
+
+        <div className="dropdown">
+          <button
+            className="btn btn-sm btn-animate text-muted py-0 dropdown-toggle"
+            onClick={linkEvent(this, this.handleShowAdvanced)}
+            data-tippy-content={i18n.t("more")}
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+            aria-controls="advancedButtonsDropdown"
+            aria-label={i18n.t("more")}
+          >
+            <Icon icon="more-vertical" inline />
+          </button>
+
+          <ul className="dropdown-menu" id="advancedButtonsDropdown">
+            {!this.myPost ? (
+              <>
+                <li>{this.reportButton}</li>
+                <li>{this.blockButton}</li>
+              </>
+            ) : (
+              <>
+                <li>{this.editButton}</li>
+                <li>{this.deleteButton}</li>
+              </>
+            )}
+
             {/* Any mod can do these, not limited to hierarchy*/}
             {(amMod(this.props.moderators) || amAdmin()) && (
               <>
-                {this.lockButton}
+                <li>
-                {this.featureButton}
+                  <hr className="dropdown-divider" />
+                </li>
+                <li>{this.lockButton}</li>
+                {this.featureButtons}
               </>
             )}
-            {(this.canMod_ || this.canAdmin_) && <>{this.modRemoveButton}</>}
+
-          </>
+            {(this.canMod_ || this.canAdmin_) && (
+              <li>{this.modRemoveButton}</li>
             )}
-        {!mobile && this.showMoreButton}
+          </ul>
+        </div>
       </>
     );
   }
@@ -706,15 +736,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
     return (
       <Link
-        className="btn btn-link text-muted py-0 pl-0 text-muted"
+        className="btn btn-link text-muted ps-0 text-muted"
         title={i18n.t("number_of_comments", {
           count: Number(post_view.counts.comments),
           formattedCount: Number(post_view.counts.comments),
         })}
         to={`/post/${post_view.post.id}?scrollToComments=true`}
       >
-        <Icon icon="message-square" classes="mr-1" inline />
+        <Icon icon="message-square" classes="me-1" inline />
-        <span className="mr-2">
+        <span className="me-2">
           {i18n.t("number_of_comments", {
             count: Number(post_view.counts.comments),
             formattedCount: numToSI(post_view.counts.comments),
@@ -759,7 +789,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <>
                 <Icon icon="arrow-up1" classes="icon-inline small" />
                 {showScores() && (
-                  <span className="ml-2">
+                  <span className="ms-2">
                     {numToSI(this.postView.counts.upvotes)}
                   </span>
                 )}
@@ -768,7 +798,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           </button>
           {this.props.enableDownvotes && (
             <button
-              className={`ml-2 btn-animate btn py-0 px-1 ${
+              className={`ms-2 btn-animate btn py-0 px-1 ${
                 this.postView.my_vote === -1 ? "text-danger" : "text-muted"
               }`}
               onClick={linkEvent(this, this.handleDownvote)}
@@ -783,7 +813,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   <Icon icon="arrow-down1" classes="icon-inline small" />
                   {showScores() && (
                     <span
-                      className={classNames("ml-2", {
+                      className={classNames("ms-2", {
                         invisible: this.postView.counts.downvotes === 0,
                       })}
                     >
@@ -804,7 +834,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = saved ? i18n.t("unsave") : i18n.t("save");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-sm btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleSavePostClick)}
         data-tippy-content={label}
         aria-label={label}
@@ -825,7 +855,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get crossPostButton() {
     return (
       <Link
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-sm btn-animate text-muted py-0"
         to={{
           /* Empty string properties are required to satisfy type*/
           pathname: "/create_post",
@@ -846,12 +876,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get reportButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleShowReportDialog)}
-        data-tippy-content={i18n.t("show_report_dialog")}
         aria-label={i18n.t("show_report_dialog")}
       >
-        <Icon icon="flag" inline />
+        <Icon classes="me-1" icon="flag" inline />
+        {i18n.t("create_report")}
       </button>
     );
   }
@@ -859,12 +889,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get blockButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleBlockPersonClick)}
-        data-tippy-content={i18n.t("block_user")}
         aria-label={i18n.t("block_user")}
       >
-        {this.state.blockLoading ? <Spinner /> : <Icon icon="slash" inline />}
+        {this.state.blockLoading ? (
+          <Spinner />
+        ) : (
+          <Icon classes="me-1" icon="slash" inline />
+        )}
+        {i18n.t("block_user")}
       </button>
     );
   }
@@ -872,12 +906,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get editButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleEditClick)}
-        data-tippy-content={i18n.t("edit")}
         aria-label={i18n.t("edit")}
       >
-        <Icon icon="edit" inline />
+        <Icon classes="me-1" icon="edit" inline />
+        {i18n.t("edit")}
       </button>
     );
   }
@@ -887,41 +921,30 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = !deleted ? i18n.t("delete") : i18n.t("restore");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleDeleteClick)}
-        data-tippy-content={label}
         aria-label={label}
       >
         {this.state.deleteLoading ? (
           <Spinner />
         ) : (
+          <>
             <Icon
               icon="trash"
-            classes={classNames({ "text-danger": deleted })}
+              classes={classNames("me-1", { "text-danger": deleted })}
               inline
             />
+            {label}
+          </>
         )}
       </button>
     );
   }
 
-  get showMoreButton() {
-    return (
-      <button
-        className="btn btn-link btn-animate text-muted py-0"
-        onClick={linkEvent(this, this.handleShowAdvanced)}
-        data-tippy-content={i18n.t("more")}
-        aria-label={i18n.t("more")}
-      >
-        <Icon icon="more-vertical" inline />
-      </button>
-    );
-  }
-
   get viewSourceButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-sm btn-animate text-muted py-0"
         onClick={linkEvent(this, this.handleViewSource)}
         data-tippy-content={i18n.t("view_source")}
         aria-label={i18n.t("view_source")}
@@ -940,25 +963,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = locked ? i18n.t("unlock") : i18n.t("lock");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleModLock)}
-        data-tippy-content={label}
         aria-label={label}
       >
         {this.state.lockLoading ? (
           <Spinner />
         ) : (
+          <>
             <Icon
               icon="lock"
-            classes={classNames({ "text-danger": locked })}
+              classes={classNames("me-1", { "text-danger": locked })}
               inline
             />
+            {label}
+          </>
         )}
       </button>
     );
   }
 
-  get featureButton() {
+  get featureButtons() {
     const featuredCommunity = this.postView.post.featured_community;
     const labelCommunity = featuredCommunity
       ? i18n.t("unfeature_from_community")
@@ -969,9 +994,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       ? i18n.t("unfeature_from_local")
       : i18n.t("feature_in_local");
     return (
-      <span>
+      <>
+        <li>
           <button
-          className="btn btn-link btn-animate text-muted py-0 pl-0"
+            className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
             onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
             data-tippy-content={labelCommunity}
             aria-label={labelCommunity}
@@ -979,19 +1005,23 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             {this.state.featureCommunityLoading ? (
               <Spinner />
             ) : (
-            <span>
+              <>
                 <Icon
                   icon="pin"
-                classes={classNames({ "text-success": featuredCommunity })}
+                  classes={classNames("me-1", {
+                    "text-success": featuredCommunity,
+                  })}
                   inline
                 />
                 {i18n.t("community")}
-            </span>
+              </>
             )}
           </button>
+        </li>
+        <li>
           {amAdmin() && (
             <button
-            className="btn btn-link btn-animate text-muted py-0"
+              className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
               onClick={linkEvent(this, this.handleModFeaturePostLocal)}
               data-tippy-content={labelLocal}
               aria-label={labelLocal}
@@ -999,18 +1029,21 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {this.state.featureLocalLoading ? (
                 <Spinner />
               ) : (
-              <span>
+                <>
                   <Icon
                     icon="pin"
-                  classes={classNames({ "text-success": featuredLocal })}
+                    classes={classNames("me-1", {
+                      "text-success": featuredLocal,
+                    })}
                     inline
                   />
                   {i18n.t("local")}
-              </span>
+                </>
               )}
             </button>
           )}
-      </span>
+        </li>
+      </>
     );
   }
 
@@ -1018,7 +1051,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const removed = this.postView.post.removed;
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(
           this,
           !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
@@ -1110,13 +1143,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             ) : (
               <>
                 <button
-                  className="d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
+                  className="d-inline-block me-1 btn btn-link btn-animate text-muted py-0"
                   aria-label={i18n.t("are_you_sure")}
                 >
                   {i18n.t("are_you_sure")}
                 </button>
                 <button
-                  className="btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
+                  className="btn btn-link btn-animate text-muted py-0 d-inline-block me-1"
                   aria-label={i18n.t("yes")}
                   onClick={linkEvent(this, this.handleTransferCommunity)}
                 >
@@ -1215,13 +1248,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             className="form-inline"
             onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
           >
-            <label className="sr-only" htmlFor="post-listing-remove-reason">
+            <label
+              className="visually-hidden"
+              htmlFor="post-listing-remove-reason"
+            >
               {i18n.t("reason")}
             </label>
             <input
               type="text"
               id="post-listing-remove-reason"
-              className="form-control mr-2"
+              className="form-control me-2"
               placeholder={i18n.t("reason")}
               value={this.state.removeReason}
               onInput={linkEvent(this, this.handleModRemoveReasonChange)}
@@ -1237,7 +1273,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         )}
         {this.state.showBanDialog && (
           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
-            <div className="form-group row col-12">
+            <div className="mb-3 row col-12">
               <label
                 className="col-form-label"
                 htmlFor="post-listing-ban-reason"
@@ -1247,7 +1283,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <input
                 type="text"
                 id="post-listing-ban-reason"
-                className="form-control mr-2"
+                className="form-control me-2"
                 placeholder={i18n.t("reason")}
                 value={this.state.banReason}
                 onInput={linkEvent(this, this.handleModBanReasonChange)}
@@ -1258,12 +1294,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <input
                 type="number"
                 id={`mod-ban-expires`}
-                className="form-control mr-2"
+                className="form-control me-2"
                 placeholder={i18n.t("number_of_days")}
                 value={this.state.banExpireDays}
                 onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
               />
-              <div className="form-group">
+              <div className="input-group mb-3">
                 <div className="form-check">
                   <input
                     className="form-check-input"
@@ -1283,11 +1319,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               </div>
             </div>
             {/* TODO hold off on expires until later */}
-            {/* <div class="form-group row"> */}
+            {/* <div class="mb-3 row"> */}
             {/*   <label class="col-form-label">Expires</label> */}
-            {/*   <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
+            {/*   <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
             {/* </div> */}
-            <div className="form-group row">
+            <div className="mb-3 row">
               <button
                 type="submit"
                 className="btn btn-secondary"
@@ -1309,13 +1345,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             className="form-inline"
             onSubmit={linkEvent(this, this.handleReportSubmit)}
           >
-            <label className="sr-only" htmlFor="post-report-reason">
+            <label className="visually-hidden" htmlFor="post-report-reason">
               {i18n.t("reason")}
             </label>
             <input
               type="text"
               id="post-report-reason"
-              className="form-control mr-2"
+              className="form-control me-2"
               placeholder={i18n.t("reason")}
               required
               value={this.state.reportReason}
@@ -1336,13 +1372,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             onSubmit={linkEvent(this, this.handlePurgeSubmit)}
           >
             <PurgeWarning />
-            <label className="sr-only" htmlFor="purge-reason">
+            <label className="visually-hidden" htmlFor="purge-reason">
               {i18n.t("reason")}
             </label>
             <input
               type="text"
               id="purge-reason"
-              className="form-control mr-2"
+              className="form-control me-2"
               placeholder={i18n.t("reason")}
               value={this.state.purgeReason}
               onInput={linkEvent(this, this.handlePurgeReasonChange)}
@@ -1398,7 +1434,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <>
         {/* The mobile view*/}
         <div className="d-block d-sm-none">
-          <div className="row">
+          <article className="row post-container">
             <div className="col-12">
               {this.createdLine()}
 
@@ -1413,14 +1449,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {this.duplicatesLine()}
               {this.removeAndBanDialogs()}
             </div>
-          </div>
+          </article>
         </div>
 
         {/* The larger view*/}
         <div className="d-none d-sm-block">
-          <div className="row">
+          <article className="row post-container">
             {!this.props.viewOnly && this.voteBar()}
-            <div className="col-sm-2 pr-0">
+            <div className="col-sm-2 pe-0 post-media">
               <div className="">{this.thumbnail()}</div>
             </div>
             <div className="col-12 col-sm-9">
@@ -1435,7 +1471,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 </div>
               </div>
             </div>
-          </div>
+          </article>
         </div>
       </>
     );

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

@@ -66,7 +66,7 @@ export class PostListings extends Component<PostListingsProps, any> {
 
   render() {
     return (
-      <div>
+      <div className="post-listings">
         {this.posts.length > 0 ? (
           this.posts.map((post_view, idx) => (
             <>
@@ -96,9 +96,7 @@ export class PostListings extends Component<PostListingsProps, any> {
                 onAddAdmin={this.props.onAddAdmin}
                 onTransferCommunity={this.props.onTransferCommunity}
               />
-              {idx + 1 !== this.posts.length && (
+              {idx + 1 !== this.posts.length && <hr className="my-3" />}
-                <hr className="my-3 border border-primary" />
-              )}
             </>
           ))
         ) : (

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

@@ -60,7 +60,7 @@ export class PostReport extends Component<PostReportProps, PostReportState> {
     };
 
     return (
-      <div>
+      <div className="post-report">
         <PostListing
           post_view={pv}
           showCommunity={true}

src/shared/components/post/post.tsx

@@ -1,3 +1,5 @@
+import { isBrowser } from "@utils/browser";
+import { debounce } from "@utils/helpers";
 import autosize from "autosize";
 import { Component, createRef, linkEvent, RefObject } from "inferno";
 import {
@@ -64,7 +66,6 @@ import {
   buildCommentsTree,
   commentsToFlatNodes,
   commentTreeMaxDepth,
-  debounce,
   editComment,
   editWith,
   enableDownvotes,
@@ -73,10 +74,10 @@ import {
   getCommentParentId,
   getDepthFromComment,
   getIdFromProps,
-  isBrowser,
   isImage,
   myAuth,
   restoreScrollPosition,
+  RouteDataResponse,
   saveScrollPosition,
   setIsoData,
   setupTippy,
@@ -93,6 +94,11 @@ import { PostListing } from "./post-listing";
 
 const commentsShownInterval = 15;
 
+type PostData = RouteDataResponse<{
+  postRes: GetPostResponse;
+  commentsRes: GetCommentsResponse;
+}>;
+
 interface PostState {
   postId?: number;
   commentId?: number;
@@ -110,7 +116,7 @@ interface PostState {
 }
 
 export class Post extends Component<any, PostState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<PostData>(this.context);
   private commentScrollDebounced: () => void;
   state: PostState = {
     postRes: { state: "empty" },
@@ -169,7 +175,7 @@ export class Post extends Component<any, PostState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [postRes, commentsRes] = this.isoData.routeData;
+      const { commentsRes, postRes } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
@@ -220,13 +226,12 @@ export class Post extends Component<any, PostState> {
     }
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
-    auth,
     client,
     path,
-  }: InitialFetchRequest): Promise<any>[] {
+    auth,
+  }: InitialFetchRequest): Promise<PostData> {
     const pathSplit = path.split("/");
-    const promises: Promise<RequestState<any>>[] = [];
 
     const pathType = pathSplit.at(1);
     const id = pathSplit.at(2) ? Number(pathSplit.at(2)) : undefined;
@@ -252,10 +257,10 @@ export class Post extends Component<any, PostState> {
       commentsForm.parent_id = id;
     }
 
-    promises.push(client.getPost(postForm));
+    return {
-    promises.push(client.getComments(commentsForm));
+      postRes: await client.getPost(postForm),
-
+      commentsRes: await client.getComments(commentsForm),
-    return promises;
+    };
   }
 
   componentWillUnmount() {
@@ -384,12 +389,13 @@ export class Post extends Component<any, PostState> {
                 disabled={res.post_view.post.locked}
                 allLanguages={this.state.siteRes.all_languages}
                 siteLanguages={this.state.siteRes.discussion_languages}
+                containerClass="post-comment-container"
                 onUpsertComment={this.handleCreateComment}
                 finished={this.state.finished.get(0)}
               />
               <div className="d-block d-md-none">
                 <button
-                  className="btn btn-secondary d-inline-block mb-2 mr-3"
+                  className="btn btn-secondary d-inline-block mb-2 me-3"
                   onClick={linkEvent(this, this.handleShowSidebarMobile)}
                 >
                   {i18n.t("sidebar")}{" "}
@@ -418,13 +424,13 @@ export class Post extends Component<any, PostState> {
   }
 
   render() {
-    return <div className="container-lg">{this.renderPostRes()}</div>;
+    return <div className="post container-lg">{this.renderPostRes()}</div>;
   }
 
   sortRadios() {
     return (
       <>
-        <div className="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
+        <div className="btn-group btn-group-toggle flex-wrap me-3 mb-2">
           <label
             className={`btn btn-outline-secondary pointer ${
               this.state.commentSort === "Hot" && "active"
@@ -433,6 +439,7 @@ export class Post extends Component<any, PostState> {
             {i18n.t("hot")}
             <input
               type="radio"
+              className="btn-check"
               value={"Hot"}
               checked={this.state.commentSort === "Hot"}
               onChange={linkEvent(this, this.handleCommentSortChange)}
@@ -446,6 +453,7 @@ export class Post extends Component<any, PostState> {
             {i18n.t("top")}
             <input
               type="radio"
+              className="btn-check"
               value={"Top"}
               checked={this.state.commentSort === "Top"}
               onChange={linkEvent(this, this.handleCommentSortChange)}
@@ -459,6 +467,7 @@ export class Post extends Component<any, PostState> {
             {i18n.t("new")}
             <input
               type="radio"
+              className="btn-check"
               value={"New"}
               checked={this.state.commentSort === "New"}
               onChange={linkEvent(this, this.handleCommentSortChange)}
@@ -472,6 +481,7 @@ export class Post extends Component<any, PostState> {
             {i18n.t("old")}
             <input
               type="radio"
+              className="btn-check"
               value={"Old"}
               checked={this.state.commentSort === "Old"}
               onChange={linkEvent(this, this.handleCommentSortChange)}
@@ -487,6 +497,7 @@ export class Post extends Component<any, PostState> {
             {i18n.t("chat")}
             <input
               type="radio"
+              className="btn-check"
               value={CommentViewType.Flat}
               checked={this.state.commentViewType === CommentViewType.Flat}
               onChange={linkEvent(this, this.handleCommentViewTypeChange)}
@@ -547,12 +558,10 @@ export class Post extends Component<any, PostState> {
     const res = this.state.postRes;
     if (res.state === "success") {
       return (
-        <div className="mb-3">
         <Sidebar
           community_view={res.data.community_view}
           moderators={res.data.moderators}
           admins={this.state.siteRes.admins}
-            online={res.data.online}
           enableNsfw={enableNsfw(this.state.siteRes)}
           showIcon
           allLanguages={this.state.siteRes.all_languages}
@@ -565,7 +574,6 @@ export class Post extends Component<any, PostState> {
           onBlockCommunity={this.handleBlockCommunity}
           onEditCommunity={this.handleEditCommunity}
         />
-        </div>
       );
     }
   }
@@ -582,14 +590,14 @@ export class Post extends Component<any, PostState> {
           {!!this.state.commentId && (
             <>
               <button
-                className="pl-0 d-block btn btn-link text-muted"
+                className="ps-0 d-block btn btn-link text-muted"
                 onClick={linkEvent(this, this.handleViewPost)}
               >
                 {i18n.t("view_all_comments")} ➔
               </button>
               {showContextButton && (
                 <button
-                  className="pl-0 d-block btn btn-link text-muted"
+                  className="ps-0 d-block btn btn-link text-muted"
                   onClick={linkEvent(this, this.handleViewContext)}
                 >
                   {i18n.t("show_context")} ➔
@@ -729,19 +737,14 @@ export class Post extends Component<any, PostState> {
 
   async handleBlockCommunity(form: BlockCommunity) {
     const blockCommunityRes = await HttpService.client.blockCommunity(form);
-    // TODO Probably isn't necessary
-    this.setState(s => {
-      if (
-        s.postRes.state == "success" &&
-        blockCommunityRes.state == "success"
-      ) {
-        s.postRes.data.community_view = blockCommunityRes.data.community_view;
-      }
-      return s;
-    });
-
     if (blockCommunityRes.state == "success") {
       updateCommunityBlock(blockCommunityRes.data);
+      this.setState(s => {
+        if (s.postRes.state == "success") {
+          s.postRes.data.community_view.blocked =
+            blockCommunityRes.data.blocked;
+        }
+      });
     }
   }
 

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

@@ -10,6 +10,7 @@ import { InitialFetchRequest } from "../../interfaces";
 import { FirstLoadService } from "../../services/FirstLoadService";
 import { HttpService, RequestState } from "../../services/HttpService";
 import {
+  RouteDataResponse,
   getRecipientIdFromProps,
   myAuth,
   setIsoData,
@@ -19,6 +20,10 @@ import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 import { PrivateMessageForm } from "./private-message-form";
 
+type CreatePrivateMessageData = RouteDataResponse<{
+  recipientDetailsResponse: GetPersonDetailsResponse;
+}>;
+
 interface CreatePrivateMessageState {
   siteRes: GetSiteResponse;
   recipientRes: RequestState<GetPersonDetailsResponse>;
@@ -30,7 +35,7 @@ export class CreatePrivateMessage extends Component<
   any,
   CreatePrivateMessageState
 > {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<CreatePrivateMessageData>(this.context);
   state: CreatePrivateMessageState = {
     siteRes: this.isoData.site_res,
     recipientRes: { state: "empty" },
@@ -47,7 +52,7 @@ export class CreatePrivateMessage extends Component<
     if (FirstLoadService.isFirstLoad) {
       this.state = {
         ...this.state,
-        recipientRes: this.isoData.routeData[0],
+        recipientRes: this.isoData.routeData.recipientDetailsResponse,
         isIsomorphic: true,
       };
     }
@@ -59,6 +64,25 @@ export class CreatePrivateMessage extends Component<
     }
   }
 
+  static async fetchInitialData({
+    client,
+    path,
+    auth,
+  }: InitialFetchRequest): Promise<CreatePrivateMessageData> {
+    const person_id = Number(path.split("/").pop());
+
+    const form: GetPersonDetails = {
+      person_id,
+      sort: "New",
+      saved_only: false,
+      auth,
+    };
+
+    return {
+      recipientDetailsResponse: await client.getPersonDetails(form),
+    };
+  }
+
   async fetchPersonDetails() {
     this.setState({
       recipientRes: { state: "loading" },
@@ -74,19 +98,6 @@ export class CreatePrivateMessage extends Component<
     });
   }
 
-  static fetchInitialData(
-    req: InitialFetchRequest
-  ): Promise<RequestState<any>>[] {
-    const person_id = Number(req.path.split("/").pop());
-    const form: GetPersonDetails = {
-      person_id,
-      sort: "New",
-      saved_only: false,
-      auth: req.auth,
-    };
-    return [req.client.getPersonDetails(form)];
-  }
-
   get documentTitle(): string {
     if (this.state.recipientRes.state == "success") {
       const name_ = this.state.recipientRes.data.person_view.person.name;
@@ -123,7 +134,7 @@ export class CreatePrivateMessage extends Component<
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="create-private-message container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}

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

@@ -73,14 +73,17 @@ export class PrivateMessageForm extends Component<
 
   render() {
     return (
-      <form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
+      <form
+        className="private-message-form"
+        onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
+      >
         <NavigationPrompt
           when={
             !this.state.loading && !!this.state.content && !this.state.submitted
           }
         />
         {!this.props.privateMessageView && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <label className="col-sm-2 col-form-label">
               {capitalizeFirstLetter(i18n.t("to"))}
             </label>
@@ -90,7 +93,7 @@ export class PrivateMessageForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <label className="col-sm-2 col-form-label">
             {i18n.t("message")}
             <button
@@ -114,7 +117,7 @@ export class PrivateMessageForm extends Component<
         </div>
 
         {this.state.showDisclaimer && (
-          <div className="form-group row">
+          <div className="mb-3 row">
             <div className="offset-sm-2 col-sm-10">
               <div className="alert alert-danger" role="alert">
                 <T i18nKey="private_message_disclaimer">
@@ -131,11 +134,11 @@ export class PrivateMessageForm extends Component<
             </div>
           </div>
         )}
-        <div className="form-group row">
+        <div className="mb-3 row">
           <div className="offset-sm-2 col-sm-10">
             <button
               type="submit"
-              className="btn btn-secondary mr-2"
+              className="btn btn-secondary me-2"
               disabled={this.state.loading}
             >
               {this.state.loading ? (

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

@@ -43,7 +43,7 @@ export class PrivateMessageReport extends Component<Props, State> {
     );
 
     return (
-      <div>
+      <div className="private-message-report">
         <div>
           {i18n.t("creator")}:{" "}
           <PersonListing person={r.private_message_creator} />

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

@@ -88,7 +88,7 @@ export class PrivateMessage extends Component<
       : message_view.creator;
 
     return (
-      <div className="border-top border-light">
+      <div className="private-message border-top border-light">
         <div>
           <ul className="list-inline mb-0 text-muted small">
             {/* TODO refactor this */}
@@ -248,13 +248,13 @@ export class PrivateMessage extends Component<
             className="form-inline"
             onSubmit={linkEvent(this, this.handleReportSubmit)}
           >
-            <label className="sr-only" htmlFor="pm-report-reason">
+            <label className="visually-hidden" htmlFor="pm-report-reason">
               {i18n.t("reason")}
             </label>
             <input
               type="text"
               id="pm-report-reason"
-              className="form-control mr-2"
+              className="form-control me-2"
               placeholder={i18n.t("reason")}
               required
               value={this.state.reportReason}

src/shared/components/search.tsx

@@ -1,3 +1,5 @@
+import { debounce, getQueryParams, getQueryString } from "@utils/helpers";
+import type { QueryParams } from "@utils/types";
 import type { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import {
@@ -26,11 +28,10 @@ import { FirstLoadService } from "../services/FirstLoadService";
 import { HttpService, RequestState } from "../services/HttpService";
 import {
   Choice,
-  QueryParams,
+  RouteDataResponse,
   capitalizeFirstLetter,
   commentsToFlatNodes,
   communityToChoice,
-  debounce,
   enableDownvotes,
   enableNsfw,
   fetchCommunities,
@@ -38,8 +39,6 @@ import {
   fetchUsers,
   getIdFromString,
   getPageFromString,
-  getQueryParams,
-  getQueryString,
   getUpdatedSearchId,
   myAuth,
   numToSI,
@@ -70,6 +69,14 @@ interface SearchProps {
   page: number;
 }
 
+type SearchData = RouteDataResponse<{
+  communityResponse: GetCommunityResponse;
+  listCommunitiesResponse: ListCommunitiesResponse;
+  creatorDetailsResponse: GetPersonDetailsResponse;
+  searchResponse: SearchResponse;
+  resolveObjectResponse: ResolveObjectResponse;
+}>;
+
 type FilterType = "creator" | "community";
 
 interface SearchState {
@@ -173,8 +180,8 @@ const Filter = ({
   loading: boolean;
 }) => {
   return (
-    <div className="form-group col-sm-6">
+    <div className="mb-3 col-sm-6">
-      <label className="col-form-label" htmlFor={`${filterType}-filter`}>
+      <label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
         {capitalizeFirstLetter(i18n.t(filterType))}
       </label>
       <SearchableSelect
@@ -228,7 +235,8 @@ function getListing(
 }
 
 export class Search extends Component<any, SearchState> {
-  private isoData = setIsoData(this.context);
+  private isoData = setIsoData<SearchData>(this.context);
+
   state: SearchState = {
     resolveObjectRes: { state: "empty" },
     creatorDetailsRes: { state: "empty" },
@@ -262,44 +270,65 @@ export class Search extends Component<any, SearchState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const [
+      const {
-        communityRes,
+        communityResponse: communityRes,
-        communitiesRes,
+        creatorDetailsResponse: creatorDetailsRes,
-        creatorDetailsRes,
+        listCommunitiesResponse: communitiesRes,
-        searchRes,
+        resolveObjectResponse: resolveObjectRes,
-        resolveObjectRes,
+        searchResponse: searchRes,
-      ] = this.isoData.routeData;
+      } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
-        communitiesRes,
-        communityRes,
-        creatorDetailsRes,
-        creatorSearchOptions:
-          creatorDetailsRes.state == "success"
-            ? [personToChoice(creatorDetailsRes.data.person_view)]
-            : [],
         isIsomorphic: true,
       };
 
-      if (communityRes.state === "success") {
+      if (creatorDetailsRes?.state === "success") {
         this.state = {
           ...this.state,
-          communitySearchOptions: [
+          creatorSearchOptions:
-            communityToChoice(communityRes.data.community_view),
+            creatorDetailsRes?.state === "success"
-          ],
+              ? [personToChoice(creatorDetailsRes.data.person_view)]
+              : [],
+          creatorDetailsRes,
         };
       }
 
-      if (q) {
+      if (communitiesRes?.state === "success") {
+        this.state = {
+          ...this.state,
+          communitiesRes,
+        };
+      }
+
+      if (communityRes?.state === "success") {
+        this.state = {
+          ...this.state,
+          communityRes,
+        };
+      }
+
+      if (q !== "") {
+        this.state = {
+          ...this.state,
+        };
+
+        if (searchRes?.state === "success") {
           this.state = {
             ...this.state,
             searchRes,
+          };
+        }
+
+        if (resolveObjectRes?.state === "success") {
+          this.state = {
+            ...this.state,
             resolveObjectRes,
           };
         }
       }
     }
+  }
 
   async componentDidMount() {
     if (!this.state.isIsomorphic) {
@@ -328,23 +357,25 @@ export class Search extends Component<any, SearchState> {
     saveScrollPosition(this.context);
   }
 
-  static fetchInitialData({
+  static async fetchInitialData({
     client,
     auth,
     query: { communityId, creatorId, q, type, sort, listingType, page },
-  }: InitialFetchRequest<QueryParams<SearchProps>>): Promise<
+  }: InitialFetchRequest<QueryParams<SearchProps>>): Promise<SearchData> {
-    RequestState<any>
-  >[] {
-    const promises: Promise<RequestState<any>>[] = [];
-
     const community_id = getIdFromString(communityId);
+    let communityResponse: RequestState<GetCommunityResponse> = {
+      state: "empty",
+    };
+    let listCommunitiesResponse: RequestState<ListCommunitiesResponse> = {
+      state: "empty",
+    };
     if (community_id) {
       const getCommunityForm: GetCommunity = {
         id: community_id,
         auth,
       };
-      promises.push(client.getCommunity(getCommunityForm));
+
-      promises.push(Promise.resolve({ state: "empty" }));
+      communityResponse = await client.getCommunity(getCommunityForm);
     } else {
       const listCommunitiesForm: ListCommunities = {
         type_: defaultListingType,
@@ -352,23 +383,32 @@ export class Search extends Component<any, SearchState> {
         limit: fetchLimit,
         auth,
       };
-      promises.push(Promise.resolve({ state: "empty" }));
+
-      promises.push(client.listCommunities(listCommunitiesForm));
+      listCommunitiesResponse = await client.listCommunities(
+        listCommunitiesForm
+      );
     }
 
     const creator_id = getIdFromString(creatorId);
+    let creatorDetailsResponse: RequestState<GetPersonDetailsResponse> = {
+      state: "empty",
+    };
     if (creator_id) {
       const getCreatorForm: GetPersonDetails = {
         person_id: creator_id,
         auth,
       };
-      promises.push(client.getPersonDetails(getCreatorForm));
+
-    } else {
+      creatorDetailsResponse = await client.getPersonDetails(getCreatorForm);
-      promises.push(Promise.resolve({ state: "empty" }));
     }
 
     const query = getSearchQueryFromQuery(q);
 
+    let searchResponse: RequestState<SearchResponse> = { state: "empty" };
+    let resolveObjectResponse: RequestState<ResolveObjectResponse> = {
+      state: "empty",
+    };
+
     if (query) {
       const form: SearchForm = {
         q: query,
@@ -383,21 +423,24 @@ export class Search extends Component<any, SearchState> {
       };
 
       if (query !== "") {
-        promises.push(client.search(form));
+        searchResponse = await client.search(form);
         if (auth) {
           const resolveObjectForm: ResolveObject = {
             q: query,
             auth,
           };
-          promises.push(client.resolveObject(resolveObjectForm));
+          resolveObjectResponse = await client.resolveObject(resolveObjectForm);
         }
-      } else {
-        promises.push(Promise.resolve({ state: "empty" }));
-        promises.push(Promise.resolve({ state: "empty" }));
       }
     }
 
-    return promises;
+    return {
+      communityResponse,
+      creatorDetailsResponse,
+      listCommunitiesResponse,
+      resolveObjectResponse,
+      searchResponse,
+    };
   }
 
   get documentTitle(): string {
@@ -410,7 +453,7 @@ export class Search extends Component<any, SearchState> {
     const { type, page } = getSearchQueryParams();
 
     return (
-      <div className="container-lg">
+      <div className="search container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -448,13 +491,11 @@ export class Search extends Component<any, SearchState> {
 
   get searchForm() {
     return (
-      <form
+      <form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
-        className="form-inline"
+        <div className="col-auto">
-        onSubmit={linkEvent(this, this.handleSearchSubmit)}
-      >
           <input
             type="text"
-          className="form-control mr-2 mb-2"
+            className="form-control me-2 mb-2 col-sm-8"
             value={this.state.searchText}
             placeholder={`${i18n.t("search")}...`}
             aria-label={i18n.t("search")}
@@ -462,13 +503,16 @@ export class Search extends Component<any, SearchState> {
             required
             minLength={1}
           />
-        <button type="submit" className="btn btn-secondary mr-2 mb-2">
+        </div>
-          {this.state.searchRes.state == "loading" ? (
+        <div className="col-auto">
+          <button type="submit" className="btn btn-secondary mb-2">
+            {this.state.searchRes.state === "loading" ? (
               <Spinner />
             ) : (
               <span>{i18n.t("search")}</span>
             )}
           </button>
+        </div>
       </form>
     );
   }
@@ -493,7 +537,7 @@ export class Search extends Component<any, SearchState> {
         <select
           value={type}
           onChange={linkEvent(this, this.handleTypeChange)}
-          className="custom-select w-auto mb-2"
+          className="form-select d-inline-block w-auto mb-2"
           aria-label={i18n.t("type")}
         >
           <option disabled aria-hidden="true">
@@ -505,7 +549,7 @@ export class Search extends Component<any, SearchState> {
             </option>
           ))}
         </select>
-        <span className="ml-2">
+        <span className="ms-2">
           <ListingTypeSelect
             type_={listingType}
             showLocal={showLocal(this.isoData)}
@@ -513,7 +557,7 @@ export class Search extends Component<any, SearchState> {
             onChange={this.handleListingTypeChange}
           />
         </span>
-        <span className="ml-2">
+        <span className="ms-2">
           <SortSelect
             sort={sort}
             onChange={this.handleSortChange}
@@ -521,7 +565,7 @@ export class Search extends Component<any, SearchState> {
             hideMostComments
           />
         </span>
-        <div className="form-row">
+        <div className="row">
           {hasCommunities && (
             <Filter
               filterType="community"

src/shared/env.ts

@@ -1,4 +1,4 @@
-import { isBrowser } from "./utils";
+import { isBrowser } from "@utils/browser";
 
 const testHost = "0.0.0.0:8536";