Merge branch 'main' into rate-limiting-tab

.babelrc

@@ -10,11 +10,11 @@
         }
       }
     ],
-    ["@babel/typescript", {"isTSX": true, "allExtensions": true}]
+    ["@babel/typescript", { "isTSX": true, "allExtensions": true }]
   ],
   "plugins": [
     "@babel/plugin-transform-runtime",
     ["babel-plugin-inferno", { "imports": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
   ]
 }

.eslintignore

@@ -1,3 +1,7 @@
 generate_translations.js
 webpack.config.js
 src/api_tests
+**/*.png
+**/*.svg
+**/*.css
+**/*.scss

.eslintrc.json

@@ -3,9 +3,7 @@
   "env": {
     "browser": true
   },
-  "plugins": [
+  "plugins": ["@typescript-eslint"],
-    "@typescript-eslint"
-  ],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F41E Bug Report"
 about: Create a report to help us improve Lemmy
-title: ''
+title: ""
 labels: bug
-assignees: ''
+assignees: ""
-
 ---
 
 Found a bug? Please fill out the sections below. 👍
@@ -15,7 +14,6 @@ For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
 
 A summary of the bug.
 
-
 ### Steps to Reproduce
 
 1. (for example) I clicked login, and an endless spinner show up.
@@ -24,6 +22,6 @@ A summary of the bug.
 
 ### Technical details
 
-* Please post your log: `sudo docker-compose logs > lemmy_log.out`.
+- Please post your log: `sudo docker-compose logs > lemmy_log.out`.
-* What OS are you trying to install lemmy on? 
+- What OS are you trying to install lemmy on?
-* Any browser console errors?
+- Any browser console errors?

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,10 +1,9 @@
 ---
 name: "\U0001F680 Feature request"
 about: Suggest an idea for improving Lemmy
-title: ''
+title: ""
 labels: enhancement
-assignees: ''
+assignees: ""
-
 ---
 
 For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)

.github/ISSUE_TEMPLATE/QUESTION.md

@@ -1,10 +1,9 @@
 ---
 name: "? Question"
 about: General questions about Lemmy
-title: ''
+title: ""
 labels: question
-assignees: ''
+assignees: ""
-
 ---
 
 What's the question you have about lemmy?

.github/ISSUE_TEMPLATE/hexbear.md

@@ -1,10 +1,9 @@
 ---
 name: Hexbear
 about: For hexbear issues
-title: ''
+title: ""
 labels: hexbear
-assignees: ''
+assignees: ""
-
 ---
 
 For hexbear-related issues

.prettierignore

@@ -1 +1,2 @@
 src/shared/translations
+lemmy-translations

README.md

@@ -8,14 +8,14 @@ Based off of MrFoxPro's [inferno-isomorphic-template](https://github.com/MrFoxPr
 
 The following environment variables can be used to configure lemmy-ui:
 
-`ENV_VAR` | type | default | description
+| `ENV_VAR`                      | type     | default          | description                                                                         |
---- | --- | --- | ---
+| ------------------------------ | -------- | ---------------- | ----------------------------------------------------------------------------------- |
-`LEMMY_UI_HOST` | `string` | `0.0.0.0:1234` | The IP / port that the lemmy-ui isomorphic node server is hosted at.
+| `LEMMY_UI_HOST`                | `string` | `0.0.0.0:1234`   | The IP / port that the lemmy-ui isomorphic node server is hosted at.                |
-`LEMMY_UI_LEMMY_INTERNAL_HOST` | `string` | `0.0.0.0:8536` | The internal IP / port that lemmy is hosted at. Often `lemmy:8536` if using docker.
+| `LEMMY_UI_LEMMY_INTERNAL_HOST` | `string` | `0.0.0.0:8536`   | The internal IP / port that lemmy is hosted at. Often `lemmy:8536` if using docker. |
-`LEMMY_UI_LEMMY_EXTERNAL_HOST` | `string` | `0.0.0.0:8536` | The external IP / port that lemmy is hosted at. Often `DOMAIN.TLD`.
+| `LEMMY_UI_LEMMY_EXTERNAL_HOST` | `string` | `0.0.0.0:8536`   | The external IP / port that lemmy is hosted at. Often `DOMAIN.TLD`.                 |
-`LEMMY_UI_LEMMY_WS_HOST` | `string` | `0.0.0.0:8536` | An alternate location for lemmy's websocket address. Not usually necessary.
+| `LEMMY_UI_LEMMY_WS_HOST`       | `string` | `0.0.0.0:8536`   | An alternate location for lemmy's websocket address. Not usually necessary.         |
-`LEMMY_UI_HTTPS` | `bool` | `false` | Whether to use https.
+| `LEMMY_UI_HTTPS`               | `bool`   | `false`          | Whether to use https.                                                               |
-`LEMMY_UI_EXTRA_THEMES_FOLDER` | `string` | `./extra_themes` | A location for additional lemmy css themes.
+| `LEMMY_UI_EXTRA_THEMES_FOLDER` | `string` | `./extra_themes` | A location for additional lemmy css themes.                                         |
-`LEMMY_UI_DEBUG` | `bool` | `false` | Loads the [Eruda](https://github.com/liriliri/eruda) debugging utility.
+| `LEMMY_UI_DEBUG`               | `bool`   | `false`          | Loads the [Eruda](https://github.com/liriliri/eruda) debugging utility.             |
-`LEMMY_UI_DISABLE_CSP` | `bool` | `false` | Disables CSP security headers
+| `LEMMY_UI_DISABLE_CSP`         | `bool`   | `false`          | Disables CSP security headers                                                       |
-`LEMMY_UI_CUSTOM_HTML_HEADER` | `string` | | Injects a custom script into `<head>`.
+| `LEMMY_UI_CUSTOM_HTML_HEADER`  | `string` |                  | Injects a custom script into `<head>`.                                              |

package.json

@@ -12,7 +12,7 @@
     "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": "node generate_translations.js && 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"
   },
@@ -89,6 +89,7 @@
   "devDependencies": {
     "@babel/core": "^7.21.8",
     "@types/autosize": "^4.0.0",
+    "@types/bootstrap": "^5.2.6",
     "@types/express": "^4.17.17",
     "@types/html-to-text": "^9.0.0",
     "@types/markdown-it": "^12.2.3",

src/assets/css/main.css

@@ -1,7 +1,3 @@
-.navbar-toggler {
-  border: 0px;
-}
-
 .navbar-expand-lg .navbar-nav .nav-link {
   padding-right: 0.75rem !important;
   padding-left: 0.75rem !important;
@@ -201,14 +197,6 @@
   }
 }
 
-.dropdown-content {
-  position: absolute;
-  background-color: var(--light);
-  min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 2000;
-}
-
 blockquote {
   border-left: 2px solid var(--secondary);
   margin: 0.5em 5px;

src/client/index.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter } from "inferno-router";
 import { App } from "../shared/components/app/app";
 import { initializeSite } from "../shared/utils";
 
+import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
 
 const site = window.isoData.site_res;

src/server/index.tsx

@@ -356,7 +356,7 @@ export async function generateManifestBase64(site: Site) {
 
 async function fetchIconPng(iconUrl: string) {
   return await fetch(
-    iconUrl.replace(/https?:\/\/localhost:\d+/g, getHttpBaseInternal())
+    iconUrl.replace(/https?:\/\/[^\/]+/g, getHttpBaseInternal())
   )
     .then(res => res.blob())
     .then(blob => blob.arrayBuffer());

src/shared/components/app/navbar.tsx

@@ -1,4 +1,4 @@
-import { Component, linkEvent } from "inferno";
+import { Component, createRef, linkEvent } from "inferno";
 import { NavLink } from "inferno-router";
 import {
   CommentResponse,
@@ -39,14 +39,22 @@ interface NavbarProps {
 }
 
 interface NavbarState {
-  expanded: boolean;
   unreadInboxCount: number;
   unreadReportCount: number;
   unreadApplicationCount: number;
-  showDropdown: boolean;
   onSiteBanner?(url: string): any;
 }
 
+function handleCollapseClick(i: Navbar) {
+  if (i.collapseButtonRef.current?.ariaExpanded === "true") {
+    i.collapseButtonRef.current?.click();
+  }
+}
+
+function handleLogOut() {
+  UserService.Instance.logout();
+}
+
 export class Navbar extends Component<NavbarProps, NavbarState> {
   private wsSub: Subscription;
   private userSub: Subscription;
@@ -57,10 +65,9 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     unreadInboxCount: 0,
     unreadReportCount: 0,
     unreadApplicationCount: 0,
-    expanded: false,
-    showDropdown: false,
   };
   subscription: any;
+  collapseButtonRef = createRef<HTMLButtonElement>();
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -113,85 +120,228 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     this.unreadApplicationCountSub.unsubscribe();
   }
 
-  render() {
-    return this.navbar();
-  }
-
   // TODO class active corresponding to current page
-  navbar() {
+  render() {
-    let siteView = this.props.siteRes.site_view;
+    const siteView = this.props.siteRes.site_view;
-    let person = UserService.Instance.myUserInfo?.local_user_view.person;
+    const person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
-      <nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3">
+      <nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg">
-        <div className="container-lg">
+        <NavLink
-          <NavLink
+          to="/"
-            to="/"
+          title={siteView.site.description ?? siteView.site.name}
-            onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
+          className="d-flex align-items-center navbar-brand mr-md-3"
-            title={siteView.site.description ?? siteView.site.name}
+          onMouseUp={linkEvent(this, handleCollapseClick)}
-            className="d-flex align-items-center navbar-brand mr-md-3"
+        >
-          >
+          {siteView.site.icon && showAvatars() && (
-            {siteView.site.icon && showAvatars() && (
+            <PictrsImage src={siteView.site.icon} icon />
-              <PictrsImage src={siteView.site.icon} icon />
+          )}
+          {siteView.site.name}
+        </NavLink>
+        {person && (
+          <ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
+            <li className="nav-item">
+              <NavLink
+                to="/inbox"
+                className="p-1 nav-link border-0"
+                title={i18n.t("unread_messages", {
+                  count: Number(this.state.unreadInboxCount),
+                  formattedCount: numToSI(this.state.unreadInboxCount),
+                })}
+                onMouseUp={linkEvent(this, handleCollapseClick)}
+              >
+                <Icon icon="bell" />
+                {this.state.unreadInboxCount > 0 && (
+                  <span className="mx-1 badge badge-light">
+                    {numToSI(this.state.unreadInboxCount)}
+                  </span>
+                )}
+              </NavLink>
+            </li>
+            {this.moderatesSomething && (
+              <li className="nav-item">
+                <NavLink
+                  to="/reports"
+                  className="p-1 nav-link border-0"
+                  title={i18n.t("unread_reports", {
+                    count: Number(this.state.unreadReportCount),
+                    formattedCount: numToSI(this.state.unreadReportCount),
+                  })}
+                  onMouseUp={linkEvent(this, handleCollapseClick)}
+                >
+                  <Icon icon="shield" />
+                  {this.state.unreadReportCount > 0 && (
+                    <span className="mx-1 badge badge-light">
+                      {numToSI(this.state.unreadReportCount)}
+                    </span>
+                  )}
+                </NavLink>
+              </li>
             )}
-            {siteView.site.name}
+            {amAdmin() && (
-          </NavLink>
+              <li className="nav-item">
-          {UserService.Instance.myUserInfo && (
+                <NavLink
-            <>
+                  to="/registration_applications"
-              <ul className="navbar-nav ml-auto">
+                  className="p-1 nav-link border-0"
+                  title={i18n.t("unread_registration_applications", {
+                    count: Number(this.state.unreadApplicationCount),
+                    formattedCount: numToSI(this.state.unreadApplicationCount),
+                  })}
+                  onMouseUp={linkEvent(this, handleCollapseClick)}
+                >
+                  <Icon icon="clipboard" />
+                  {this.state.unreadApplicationCount > 0 && (
+                    <span className="mx-1 badge badge-light">
+                      {numToSI(this.state.unreadApplicationCount)}
+                    </span>
+                  )}
+                </NavLink>
+              </li>
+            )}
+          </ul>
+        )}
+        <button
+          className="navbar-toggler border-0 p-1"
+          type="button"
+          aria-label="menu"
+          data-tippy-content={i18n.t("expand_here")}
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarDropdown"
+          aria-controls="navbarDropdown"
+          aria-expanded="false"
+          ref={this.collapseButtonRef}
+        >
+          <Icon icon="menu" />
+        </button>
+        <div className="collapse navbar-collapse my-2" id="navbarDropdown">
+          <ul className="mr-auto navbar-nav">
+            <li className="nav-item">
+              <NavLink
+                to="/communities"
+                className="nav-link"
+                title={i18n.t("communities")}
+                onMouseUp={linkEvent(this, handleCollapseClick)}
+              >
+                {i18n.t("communities")}
+              </NavLink>
+            </li>
+            <li className="nav-item">
+              {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
+              <NavLink
+                to={{
+                  pathname: "/create_post",
+                  search: "",
+                  hash: "",
+                  key: "",
+                  state: { prevPath: this.currentLocation },
+                }}
+                className="nav-link"
+                title={i18n.t("create_post")}
+                onMouseUp={linkEvent(this, handleCollapseClick)}
+              >
+                {i18n.t("create_post")}
+              </NavLink>
+            </li>
+            {canCreateCommunity(this.props.siteRes) && (
+              <li className="nav-item">
+                <NavLink
+                  to="/create_community"
+                  className="nav-link"
+                  title={i18n.t("create_community")}
+                  onMouseUp={linkEvent(this, handleCollapseClick)}
+                >
+                  {i18n.t("create_community")}
+                </NavLink>
+              </li>
+            )}
+            <li className="nav-item">
+              <a
+                className="nav-link"
+                title={i18n.t("support_lemmy")}
+                href={donateLemmyUrl}
+              >
+                <Icon icon="heart" classes="small" />
+              </a>
+            </li>
+          </ul>
+          <ul className="navbar-nav">
+            {!this.context.router.history.location.pathname.match(
+              /^\/search/
+            ) && (
+              <li className="nav-item">
+                <NavLink
+                  to="/search"
+                  className="nav-link"
+                  title={i18n.t("search")}
+                  onMouseUp={linkEvent(this, handleCollapseClick)}
+                >
+                  <Icon icon="search" />
+                </NavLink>
+              </li>
+            )}
+            {amAdmin() && (
+              <li className="nav-item">
+                <NavLink
+                  to="/admin"
+                  className="nav-link"
+                  title={i18n.t("admin_settings")}
+                  onMouseUp={linkEvent(this, handleCollapseClick)}
+                >
+                  <Icon icon="settings" />
+                </NavLink>
+              </li>
+            )}
+            {person ? (
+              <>
                 <li className="nav-item">
                   <NavLink
+                    className="nav-link"
                     to="/inbox"
-                    className="p-1 navbar-toggler nav-link border-0"
-                    onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                     title={i18n.t("unread_messages", {
                       count: Number(this.state.unreadInboxCount),
                       formattedCount: numToSI(this.state.unreadInboxCount),
                     })}
+                    onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
                     <Icon icon="bell" />
                     {this.state.unreadInboxCount > 0 && (
-                      <span className="mx-1 badge badge-light">
+                      <span className="ml-1 badge badge-light">
                         {numToSI(this.state.unreadInboxCount)}
                       </span>
                     )}
                   </NavLink>
                 </li>
-              </ul>
+                {this.moderatesSomething && (
-              {this.moderatesSomething && (
-                <ul className="navbar-nav ml-1">
                   <li className="nav-item">
                     <NavLink
+                      className="nav-link"
                       to="/reports"
-                      className="p-1 navbar-toggler nav-link border-0"
-                      onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                       title={i18n.t("unread_reports", {
                         count: Number(this.state.unreadReportCount),
                         formattedCount: numToSI(this.state.unreadReportCount),
                       })}
+                      onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
                       <Icon icon="shield" />
                       {this.state.unreadReportCount > 0 && (
-                        <span className="mx-1 badge badge-light">
+                        <span className="ml-1 badge badge-light">
                           {numToSI(this.state.unreadReportCount)}
                         </span>
                       )}
                     </NavLink>
                   </li>
-                </ul>
+                )}
-              )}
+                {amAdmin() && (
-              {amAdmin() && (
-                <ul className="navbar-nav ml-1">
                   <li className="nav-item">
                     <NavLink
                       to="/registration_applications"
-                      className="p-1 navbar-toggler nav-link border-0"
+                      className="nav-link"
-                      onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                       title={i18n.t("unread_registration_applications", {
                         count: Number(this.state.unreadApplicationCount),
                         formattedCount: numToSI(
                           this.state.unreadApplicationCount
                         ),
                       })}
+                      onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
                       <Icon icon="clipboard" />
                       {this.state.unreadApplicationCount > 0 && (
@@ -201,241 +351,70 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       )}
                     </NavLink>
                   </li>
-                </ul>
-              )}
-            </>
-          )}
-          <button
-            className="navbar-toggler border-0 p-1"
-            type="button"
-            aria-label="menu"
-            onClick={linkEvent(this, this.handleToggleExpandNavbar)}
-            data-tippy-content={i18n.t("expand_here")}
-          >
-            <Icon icon="menu" />
-          </button>
-          <div
-            className={`${!this.state.expanded && "collapse"} navbar-collapse`}
-          >
-            <ul className="navbar-nav my-2 mr-auto">
-              <li className="nav-item">
-                <NavLink
-                  to="/communities"
-                  className="nav-link"
-                  onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
-                  title={i18n.t("communities")}
-                >
-                  {i18n.t("communities")}
-                </NavLink>
-              </li>
-              <li className="nav-item">
-                {/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
-                <NavLink
-                  to={{
-                    pathname: "/create_post",
-                    search: "",
-                    hash: "",
-                    key: "",
-                    state: { prevPath: this.currentLocation },
-                  }}
-                  className="nav-link"
-                  onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
-                  title={i18n.t("create_post")}
-                >
-                  {i18n.t("create_post")}
-                </NavLink>
-              </li>
-              {canCreateCommunity(this.props.siteRes) && (
-                <li className="nav-item">
-                  <NavLink
-                    to="/create_community"
-                    className="nav-link"
-                    onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
-                    title={i18n.t("create_community")}
-                  >
-                    {i18n.t("create_community")}
-                  </NavLink>
-                </li>
-              )}
-              <li className="nav-item">
-                <a
-                  className="nav-link"
-                  title={i18n.t("support_lemmy")}
-                  href={donateLemmyUrl}
-                >
-                  <Icon icon="heart" classes="small" />
-                </a>
-              </li>
-            </ul>
-            <ul className="navbar-nav my-2">
-              {amAdmin() && (
-                <li className="nav-item">
-                  <NavLink
-                    to="/admin"
-                    className="nav-link"
-                    onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
-                    title={i18n.t("admin_settings")}
-                  >
-                    <Icon icon="settings" />
-                  </NavLink>
-                </li>
-              )}
-            </ul>
-            {!this.context.router.history.location.pathname.match(
-              /^\/search/
-            ) && (
-              <ul className="navbar-nav">
-                <li className="nav-item">
-                  <NavLink
-                    to="/search"
-                    className="nav-link"
-                    title={i18n.t("search")}
-                  >
-                    <Icon icon="search" />
-                  </NavLink>
-                </li>
-              </ul>
-            )}
-            {UserService.Instance.myUserInfo ? (
-              <>
-                <ul className="navbar-nav my-2">
-                  <li className="nav-item">
-                    <NavLink
-                      className="nav-link"
-                      to="/inbox"
-                      onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
-                      title={i18n.t("unread_messages", {
-                        count: Number(this.state.unreadInboxCount),
-                        formattedCount: numToSI(this.state.unreadInboxCount),
-                      })}
-                    >
-                      <Icon icon="bell" />
-                      {this.state.unreadInboxCount > 0 && (
-                        <span className="ml-1 badge badge-light">
-                          {numToSI(this.state.unreadInboxCount)}
-                        </span>
-                      )}
-                    </NavLink>
-                  </li>
-                </ul>
-                {this.moderatesSomething && (
-                  <ul className="navbar-nav my-2">
-                    <li className="nav-item">
-                      <NavLink
-                        className="nav-link"
-                        to="/reports"
-                        onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
-                        title={i18n.t("unread_reports", {
-                          count: Number(this.state.unreadReportCount),
-                          formattedCount: numToSI(this.state.unreadReportCount),
-                        })}
-                      >
-                        <Icon icon="shield" />
-                        {this.state.unreadReportCount > 0 && (
-                          <span className="ml-1 badge badge-light">
-                            {numToSI(this.state.unreadReportCount)}
-                          </span>
-                        )}
-                      </NavLink>
-                    </li>
-                  </ul>
-                )}
-                {amAdmin() && (
-                  <ul className="navbar-nav my-2">
-                    <li className="nav-item">
-                      <NavLink
-                        to="/registration_applications"
-                        className="nav-link"
-                        onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
-                        title={i18n.t("unread_registration_applications", {
-                          count: Number(this.state.unreadApplicationCount),
-                          formattedCount: numToSI(
-                            this.state.unreadApplicationCount
-                          ),
-                        })}
-                      >
-                        <Icon icon="clipboard" />
-                        {this.state.unreadApplicationCount > 0 && (
-                          <span className="mx-1 badge badge-light">
-                            {numToSI(this.state.unreadApplicationCount)}
-                          </span>
-                        )}
-                      </NavLink>
-                    </li>
-                  </ul>
                 )}
                 {person && (
-                  <ul className="navbar-nav">
+                  <div className="dropdown">
-                    <li className="nav-item dropdown">
+                    <button
-                      <button
+                      className="btn dropdown-toggle"
-                        className="nav-link btn btn-link dropdown-toggle"
+                      role="button"
-                        onClick={linkEvent(this, this.handleToggleDropdown)}
+                      aria-expanded="false"
-                        id="navbarDropdown"
+                      data-bs-toggle="dropdown"
-                        role="button"
+                    >
-                        aria-expanded="false"
+                      {showAvatars() && person.avatar && (
-                      >
+                        <PictrsImage src={person.avatar} icon />
-                        <span>
-                          {showAvatars() && person.avatar && (
-                            <PictrsImage src={person.avatar} icon />
-                          )}
-                          {person.display_name ?? person.name}
-                        </span>
-                      </button>
-                      {this.state.showDropdown && (
-                        <div
-                          className="dropdown-content"
-                          onMouseLeave={linkEvent(
-                            this,
-                            this.handleToggleDropdown
-                          )}
-                        >
-                          <li className="nav-item">
-                            <NavLink
-                              to={`/u/${person.name}`}
-                              className="nav-link"
-                              title={i18n.t("profile")}
-                            >
-                              <Icon icon="user" classes="mr-1" />
-                              {i18n.t("profile")}
-                            </NavLink>
-                          </li>
-                          <li className="nav-item">
-                            <NavLink
-                              to="/settings"
-                              className="nav-link"
-                              title={i18n.t("settings")}
-                            >
-                              <Icon icon="settings" classes="mr-1" />
-                              {i18n.t("settings")}
-                            </NavLink>
-                          </li>
-                          <li>
-                            <hr className="dropdown-divider" />
-                          </li>
-                          <li className="nav-item">
-                            <button
-                              className="nav-link btn btn-link"
-                              onClick={linkEvent(this, this.handleLogoutClick)}
-                              title="test"
-                            >
-                              <Icon icon="log-out" classes="mr-1" />
-                              {i18n.t("logout")}
-                            </button>
-                          </li>
-                        </div>
                       )}
-                    </li>
+                      {person.display_name ?? person.name}
-                  </ul>
+                    </button>
+                    <ul
+                      className="dropdown-menu"
+                      style={{ "min-width": "fit-content" }}
+                    >
+                      <li>
+                        <NavLink
+                          to={`/u/${person.name}`}
+                          className="dropdown-item px-2"
+                          title={i18n.t("profile")}
+                          onMouseUp={linkEvent(this, handleCollapseClick)}
+                        >
+                          <Icon icon="user" classes="mr-1" />
+                          {i18n.t("profile")}
+                        </NavLink>
+                      </li>
+                      <li>
+                        <NavLink
+                          to="/settings"
+                          className="dropdown-item px-2"
+                          title={i18n.t("settings")}
+                          onMouseUp={linkEvent(this, handleCollapseClick)}
+                        >
+                          <Icon icon="settings" classes="mr-1" />
+                          {i18n.t("settings")}
+                        </NavLink>
+                      </li>
+                      <li>
+                        <hr className="dropdown-divider" />
+                      </li>
+                      <li>
+                        <button
+                          className="dropdown-item btn btn-link px-2"
+                          onClick={handleLogOut}
+                        >
+                          <Icon icon="log-out" classes="mr-1" />
+                          {i18n.t("logout")}
+                        </button>
+                      </li>
+                    </ul>
+                  </div>
                 )}
               </>
             ) : (
-              <ul className="navbar-nav my-2">
+              <>
                 <li className="nav-item">
                   <NavLink
                     to="/login"
                     className="nav-link"
-                    onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                     title={i18n.t("login")}
+                    onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
                     {i18n.t("login")}
                   </NavLink>
@@ -444,15 +423,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   <NavLink
                     to="/signup"
                     className="nav-link"
-                    onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                     title={i18n.t("sign_up")}
+                    onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
                     {i18n.t("sign_up")}
                   </NavLink>
                 </li>
-              </ul>
+              </>
             )}
-          </div>
+          </ul>
         </div>
       </nav>
     );
@@ -464,23 +443,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     return amAdmin() || moderatesS;
   }
 
-  handleToggleExpandNavbar(i: Navbar) {
-    i.setState({ expanded: !i.state.expanded });
-  }
-
-  handleHideExpandNavbar(i: Navbar) {
-    i.setState({ expanded: false, showDropdown: false });
-  }
-
-  handleLogoutClick(i: Navbar) {
-    i.setState({ showDropdown: false, expanded: false });
-    UserService.Instance.logout();
-  }
-
-  handleToggleDropdown(i: Navbar) {
-    i.setState({ showDropdown: !i.state.showDropdown });
-  }
-
   parseMessage(msg: any) {
     let op = wsUserOp(msg);
     console.log(msg);

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

@@ -42,6 +42,7 @@ import {
   colorList,
   commentTreeMaxDepth,
   futureDaysToUnixTime,
+  getCommentParentId,
   isAdmin,
   isBanned,
   isMod,
@@ -1051,11 +1052,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       ? i18n.t("show_context")
       : i18n.t("link");
 
+    // The context button should show the parent comment by default
+    const parentCommentId = getCommentParentId(cv.comment) ?? cv.comment.id;
+
     return (
       <>
         <Link
           className={classnames}
-          to={`/comment/${cv.comment.id}`}
+          to={`/comment/${parentCommentId}`}
           title={title}
         >
           <Icon icon="link" classes="icon-inline" />

tsconfig.json

@@ -1,29 +1,28 @@
 {
-	"compilerOptions": {
+  "compilerOptions": {
-		"pretty": true,
+    "pretty": true,
-		"target": "esnext",
+    "target": "esnext",
-		"module": "esnext",
+    "module": "esnext",
-		"allowSyntheticDefaultImports": true,
+    "allowSyntheticDefaultImports": true,
-		"preserveConstEnums": true,
+    "preserveConstEnums": true,
-		"sourceMap": true,
+    "sourceMap": true,
-		"moduleResolution": "node",
+    "moduleResolution": "node",
-		"lib": ["es2017", "dom"],
+    "lib": ["es2017", "dom"],
-		"types": [
+    "types": ["inferno"],
-			"inferno"
+    "jsx": "preserve",
-		],
+    "noUnusedLocals": true,
-		"jsx": "preserve",
+    "baseUrl": "./src",
-		"noUnusedLocals": true,
+    "noEmit": true,
-		"baseUrl": "./src",
+    "skipLibCheck": true,
-		"noEmit": true,
+    "noUnusedParameters": true,
-		"skipLibCheck": true,
+    "noImplicitReturns": true,
-		"noUnusedParameters": true,
-		"noImplicitReturns": true,
     "experimentalDecorators": true,
     "strictNullChecks": true,
     "noFallthroughCasesInSwitch": true
-	},
+  },
-	"include": [
+  "include": [
-		"src/**/*",
+    "src/**/*.ts",
-		"node_modules/inferno/dist/index.d.ts"
+    "src/**/*.tsx",
-	]
+    "node_modules/inferno/dist/index.d.ts"
+  ]
 }

yarn.lock

@@ -1155,7 +1155,7 @@
     picocolors "^1.0.0"
     tslib "^2.5.0"
 
-"@popperjs/core@^2.9.0":
+"@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
   version "2.11.7"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
   integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
@@ -1235,6 +1235,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/bootstrap@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.2.6.tgz#e861b3aa1f4a1434da0bf50fbaa372b6f7e64d2f"
+  integrity sha512-BlAc3YATdasbHoxMoBWODrSF6qwQO/E9X8wVxCCSa6rWjnaZfpkr2N6pUMCY6jj2+wf0muUtLySbvU9etX6YqA==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+
 "@types/connect-history-api-fallback@^1.3.5":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#9fd20b3974bdc2bcd4ac6567e2e0f6885cb2cf41"