Merge branch 'main' into reduce-bundle

diff --combined package.json
index aab8ecb77fed34517f68e8a243178c4f2b2be579,aaf623a6e2283dcba463596e149d09aca72830a9..e40307ac7dd550dc4f39642243dfdf668a0dec14
--- 1/package.json
--- 2/package.json
+++ b/package.json
@@@ -1,20 -1,20 +1,20 @@@
  {
    "name": "lemmy-ui",
-   "version": "0.18.0-rc.6",
+   "version": "0.18.0-rc.7",
    "description": "An isomorphic UI for lemmy",
    "repository": "https://github.com/LemmyNet/lemmy-ui",
    "license": "AGPL-3.0",
    "author": "Dessalines <tyhou13@gmx.com>",
    "scripts": {
 +    "analyze": "webpack --mode=none",
      "prebuild:dev": "yarn clean && node generate_translations.js",
      "build:dev": "webpack --mode=development",
      "prebuild:prod": "yarn clean && node generate_translations.js",
      "build:prod": "webpack --mode=production",
      "clean": "yarn run rimraf dist",
 -    "dev": "yarn start",
 +    "dev": "yarn build:dev --watch",
      "lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
      "prepare": "husky install",
 -    "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",
@@@ -51,7 -51,6 +51,7 @@@
      "copy-webpack-plugin": "^11.0.0",
      "cross-fetch": "^3.1.5",
      "css-loader": "^6.7.3",
 +    "date-fns": "^2.30.0",
      "emoji-mart": "^5.4.0",
      "emoji-short-name": "^2.0.0",
      "express": "~4.18.2",
@@@ -77,6 -76,7 +77,6 @@@
      "markdown-it-sub": "^1.0.0",
      "markdown-it-sup": "^1.0.0",
      "mini-css-extract-plugin": "^2.7.5",
 -    "moment": "^2.29.4",
      "register-service-worker": "^1.7.2",
      "run-node-webpack-plugin": "^1.3.0",
      "sanitize-html": "^2.10.0",
@@@ -101,7 -101,6 +101,7 @@@
      "@types/markdown-it": "^12.2.3",
      "@types/markdown-it-container": "^2.0.5",
      "@types/node": "^20.1.2",
 +    "@types/path-browserify": "^1.0.0",
      "@types/sanitize-html": "^2.9.0",
      "@types/serialize-javascript": "^5.0.1",
      "@types/toastify-js": "^1.11.1",
@@@ -123,7 -122,6 +123,7 @@@
      "style-loader": "^3.3.2",
      "terser": "^5.17.3",
      "typescript": "^5.0.4",
 +    "webpack-bundle-analyzer": "^4.9.0",
      "webpack-dev-server": "4.15.0"
    },
    "packageManager": "yarn@1.22.19",

diff --combined src/shared/components/modlog.tsx
index dd4f56fac7719698ad97860e2943862fd7a49a2c,722f6e7088211749f6ee2a4a80b61ea88488c4db..0d5afbaa4e5a07b5537891dcdfc9f86b0f08815c
--- 1/src/shared/components/modlog.tsx
--- 2/src/shared/components/modlog.tsx
+++ b/src/shared/components/modlog.tsx
@@@ -15,8 -15,6 +15,8 @@@ import 
  import { amAdmin, amMod } from "@utils/roles";
  import type { QueryParams } from "@utils/types";
  import { Choice, RouteDataResponse } from "@utils/types";
 +import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
 +import parseISO from "date-fns/parseISO";
  import { NoOptionI18nKeys } from "i18next";
  import { Component, linkEvent } from "inferno";
  import { T } from "inferno-i18next-dess";
@@@ -46,6 -44,7 +46,6 @@@ import 
    ModlogActionType,
    Person,
  } from "lemmy-js-client";
 -import moment from "moment";
  import { fetchLimit } from "../config";
  import { InitialFetchRequest } from "../interfaces";
  import { FirstLoadService, I18NextService } from "../services";
@@@ -119,10 -118,6 +119,10 @@@ function getActionFromString(action?: s
    return action !== undefined ? (action as ModlogActionType) : "All";
  }
  
 +function getExpires(expires: string) {
 +  return formatDistanceToNowStrict(parseISO(expires));
 +}
 +
  const getModlogActionMapper =
    (
      actionType: ModlogActionType,
@@@ -376,7 -371,7 +376,7 @@@ function renderModlogType({ type_, vie
            )}
            {expires && (
              <span>
 -              <div>expires: {moment.utc(expires).fromNow()}</div>
 +              <div>expires: {getExpires(expires)}</div>
              </span>
            )}
          </>
@@@ -408,7 -403,7 +408,7 @@@
            )}
            {expires && (
              <span>
 -              <div>expires: {moment.utc(expires).fromNow()}</div>
 +              <div>expires: {getExpires(expires)}</div>
              </span>
            )}
          </>
@@@ -472,7 -467,7 +472,7 @@@
            )}
            {expires && (
              <span>
 -              <div>expires: {moment.utc(expires).fromNow()}</div>
 +              <div>expires: {getExpires(expires)}</div>
              </span>
            )}
          </>
@@@ -691,6 -686,10 +691,10 @@@ export class Modlog extends Component
      }
    }
  
+   async componentDidMount() {
+     await this.refetch();
+   }
+ 
    get combined() {
      const res = this.state.res;
      const combined = res.state == "success" ? buildCombined(res.data) : [];