From ef8a3339b4c9b0b28691cb1c6908e65c157892e2 Mon Sep 17 00:00:00 2001
From: YUCLing <luotianyi@luotianyi.me>
Date: Mon, 18 Nov 2024 09:49:25 +0800
Subject: [PATCH] wip: remove jquery removed jquery from components: -
 AvatarEditor - CommentPost - HeaderList - LogInButton - NotificationGrid -
 PostMeta - PostsPage - PostStream - ReplyPlaceholder - SignUpModal -
 WelcomeHero - ComposerState fix: wrong usage of select fix: incorrect
 selector syntax

---
 .../components/AutocompleteDropdown.tsx       |   2 +-
 .../src/common/components/EditUserModal.tsx   |   2 +-
 .../js/src/common/components/FormModal.tsx    |   4 +-
 .../js/src/common/utils/heightWithMargin.ts   |   4 +
 .../core/js/src/common/utils/scrollEnd.ts     |  24 ++++
 .../js/src/forum/components/AvatarEditor.js   |  18 +--
 .../js/src/forum/components/CommentPost.js    |  25 ++--
 .../js/src/forum/components/HeaderList.tsx    |  16 +--
 .../js/src/forum/components/LogInButton.js    |   5 +-
 .../src/forum/components/NotificationGrid.js  |  20 ++-
 .../core/js/src/forum/components/PostMeta.tsx |   2 +-
 .../js/src/forum/components/PostStream.js     | 130 +++++++++---------
 .../js/src/forum/components/PostsPage.tsx     |   3 +-
 .../src/forum/components/ReplyPlaceholder.tsx |   4 +-
 .../core/js/src/forum/components/Search.tsx   |   2 +-
 .../js/src/forum/components/SignUpModal.tsx   |   4 +-
 .../js/src/forum/components/WelcomeHero.tsx   |  14 +-
 .../js/src/forum/states/ComposerState.tsx     |   4 +-
 framework/core/less/forum/Post.less           |   2 +-
 19 files changed, 160 insertions(+), 125 deletions(-)
 create mode 100644 framework/core/js/src/common/utils/heightWithMargin.ts
 create mode 100644 framework/core/js/src/common/utils/scrollEnd.ts

diff --git a/framework/core/js/src/common/components/AutocompleteDropdown.tsx b/framework/core/js/src/common/components/AutocompleteDropdown.tsx
index b314d881c7..68859dda7d 100644
--- a/framework/core/js/src/common/components/AutocompleteDropdown.tsx
+++ b/framework/core/js/src/common/components/AutocompleteDropdown.tsx
@@ -107,7 +107,7 @@ export default abstract class AutocompleteDropdown<
       m.redraw();
 
       this.addEventListener('mouseup', (e) => e.preventDefault(), { once: true });
-      this.dispatchEvent(new Event('select'));
+      this.select();
     });
     input.addEventListener('blur', () => {
       component.hasFocus = false;
diff --git a/framework/core/js/src/common/components/EditUserModal.tsx b/framework/core/js/src/common/components/EditUserModal.tsx
index 75a418dd8f..36707005ac 100644
--- a/framework/core/js/src/common/components/EditUserModal.tsx
+++ b/framework/core/js/src/common/components/EditUserModal.tsx
@@ -109,7 +109,7 @@ export default class EditUserModal<CustomAttrs extends IEditUserModalAttrs = IEd
                     const target = e.target as HTMLInputElement;
                     this.setPassword(target.checked);
                     m.redraw.sync();
-                    if (target.checked) this.element.querySelector('[name=password]')?.dispatchEvent(new Event('select'));
+                    if (target.checked) (this.element.querySelector('[name=password]') as HTMLInputElement)?.select();
                     e.redraw = false;
                   }}
                   disabled={this.nonAdminEditingAdmin()}
diff --git a/framework/core/js/src/common/components/FormModal.tsx b/framework/core/js/src/common/components/FormModal.tsx
index 2e143b1e78..0c09b68ded 100644
--- a/framework/core/js/src/common/components/FormModal.tsx
+++ b/framework/core/js/src/common/components/FormModal.tsx
@@ -33,7 +33,7 @@ export default abstract class FormModal<ModalAttrs extends IFormModalAttrs = IFo
     const input = this.element.querySelector('input, select, textarea') as (HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement);
     if (!input) return;
     input.focus();
-    input.dispatchEvent(new Event('select'));
+    if ('select' in input) input.select();
   }
 
   /**
@@ -46,7 +46,7 @@ export default abstract class FormModal<ModalAttrs extends IFormModalAttrs = IFo
     m.redraw();
 
     if (error.status === 422 && error.response?.errors) {
-      this.element.querySelector(`form [name=${(error.response.errors as any[])[0].source.pointer.replace('/data/attributes/', '')}]`)?.dispatchEvent(new Event('select'));
+      (this.element.querySelector(`form [name='${(error.response.errors as any[])[0].source.pointer.replace('/data/attributes/', '')}']`) as HTMLInputElement)?.select();
     } else {
       this.onready();
     }
diff --git a/framework/core/js/src/common/utils/heightWithMargin.ts b/framework/core/js/src/common/utils/heightWithMargin.ts
new file mode 100644
index 0000000000..ca7b6b7695
--- /dev/null
+++ b/framework/core/js/src/common/utils/heightWithMargin.ts
@@ -0,0 +1,4 @@
+export default function heightWithMargin(element: HTMLElement): number {
+    const style = getComputedStyle(element);
+    return element.getBoundingClientRect().height + parseInt(style.marginBottom, 10) + parseInt(style.marginTop, 10);
+}
\ No newline at end of file
diff --git a/framework/core/js/src/common/utils/scrollEnd.ts b/framework/core/js/src/common/utils/scrollEnd.ts
new file mode 100644
index 0000000000..959dddfb33
--- /dev/null
+++ b/framework/core/js/src/common/utils/scrollEnd.ts
@@ -0,0 +1,24 @@
+/**
+ * A utility function that waits for the scroll to end.
+ * Due to lack of support from some browsers, this is a workaround for `scrollend` event.
+ * 
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo#behavior
+ * @see https://caniuse.com/mdn-api_element_scrollend_event
+ * @param container The container element to wait scroll end on.
+ * @returns A promise that resolves when the scroll is ended.
+ */
+export default function scrollEnd(container: HTMLElement): Promise<void> {
+    let lastTop = container.scrollTop;
+
+    return new Promise((resolve) => {
+        const animFrame = () => {
+            if (lastTop === container.scrollTop) {
+                resolve();
+            } else {
+                requestAnimationFrame(animFrame);
+                lastTop = container.scrollTop;
+            }
+        };
+        requestAnimationFrame(animFrame);
+    });
+}
\ No newline at end of file
diff --git a/framework/core/js/src/forum/components/AvatarEditor.js b/framework/core/js/src/forum/components/AvatarEditor.js
index fd1da14226..c40ae7968e 100644
--- a/framework/core/js/src/forum/components/AvatarEditor.js
+++ b/framework/core/js/src/forum/components/AvatarEditor.js
@@ -149,15 +149,15 @@ export default class AvatarEditor extends Component {
 
     // Create a hidden HTML input element and click on it so the user can select
     // an avatar file. Once they have, we will upload it via the API.
-    const $input = $('<input type="file" accept=".jpg, .jpeg, .png, .bmp, .gif">');
-
-    $input
-      .appendTo('body')
-      .hide()
-      .click()
-      .on('input', (e) => {
-        this.upload($(e.target)[0].files[0]);
-      });
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.jpg, .jpeg, .png, .bmp, .gif';
+    input.style.display = 'none';
+    input.click();
+    input.addEventListener('input', (e) => {
+      this.upload(e.target.files[0]);
+    });
+    document.body.append(input);
   }
 
   /**
diff --git a/framework/core/js/src/forum/components/CommentPost.js b/framework/core/js/src/forum/components/CommentPost.js
index ab17245794..7e61d3fb20 100644
--- a/framework/core/js/src/forum/components/CommentPost.js
+++ b/framework/core/js/src/forum/components/CommentPost.js
@@ -82,12 +82,12 @@ export default class CommentPost extends Post {
     // all of the <script> tags in the content and evaluate them. This is
     // necessary because TextFormatter outputs them for e.g. syntax highlighting.
     if (this.contentHtml !== contentHtml) {
-      this.$('.Post-body script').each(function () {
+      this.element.querySelectorAll('.Post-body script').forEach((el) => {
         const script = document.createElement('script');
-        script.textContent = this.textContent;
-        Array.from(this.attributes).forEach((attr) => script.setAttribute(attr.name, attr.value));
-        this.parentNode.replaceChild(script, this);
-      });
+        script.textContent = el.textContent;
+        Array.from(el.attributes).forEach((attr) => script.setAttribute(attr.name, attr.value));
+        this.parentNode.replaceChild(script, el);
+      })
     }
 
     this.contentHtml = contentHtml;
@@ -183,18 +183,19 @@ export default class CommentPost extends Post {
     this.cardVisible = true;
     m.redraw();
 
-    setTimeout(() => this.$('.UserCard').addClass('in'));
+    setTimeout(() => this.element.querySelector('.UserCard')?.classList.add('show'));
   }
 
   /**
    * Hide the user card.
    */
   hideCard() {
-    this.$('.UserCard')
-      .removeClass('in')
-      .one('transitionend webkitTransitionEnd oTransitionEnd', () => {
-        this.cardVisible = false;
-        m.redraw();
-      });
+    const userCard = this.element.querySelector('.UserCard');
+    if (!userCard) return;
+    userCard.classList.remove('show');
+    userCard.addEventListener('transitionend', () => {
+      this.cardVisible = false;
+      m.redraw();
+    }, { once: true });
   }
 }
diff --git a/framework/core/js/src/forum/components/HeaderList.tsx b/framework/core/js/src/forum/components/HeaderList.tsx
index 6c894db7af..3902f8b8b3 100644
--- a/framework/core/js/src/forum/components/HeaderList.tsx
+++ b/framework/core/js/src/forum/components/HeaderList.tsx
@@ -16,8 +16,8 @@ export interface IHeaderListAttrs extends ComponentAttrs {
 }
 
 export default class HeaderList<CustomAttrs extends IHeaderListAttrs = IHeaderListAttrs> extends Component<CustomAttrs> {
-  $content: JQuery<any> | null = null;
-  $scrollParent: JQuery<any> | null = null;
+  content: HTMLDivElement | null = null;
+  scrollParent: HTMLElement | null = null;
   boundScrollHandler: (() => void) | null = null;
 
   view(vnode: Mithril.Vnode<CustomAttrs, this>) {
@@ -47,13 +47,13 @@ export default class HeaderList<CustomAttrs extends IHeaderListAttrs = IHeaderLi
     super.oncreate(vnode);
 
     if (this.attrs.loadMore) {
-      this.$content = this.$('.HeaderList-content');
+      this.content = this.element.querySelector(".HeaderList-content");
 
       // If we are on the notifications page, the window will be scrolling and not the $notifications element.
-      this.$scrollParent = this.inPanel() ? this.$content : $(window);
+      this.scrollParent = this.inPanel() ? this.content : document.documentElement;
 
       this.boundScrollHandler = this.scrollHandler.bind(this);
-      this.$scrollParent.on('scroll', this.boundScrollHandler);
+      this.scrollParent?.addEventListener('scroll', this.boundScrollHandler);
     }
   }
 
@@ -61,14 +61,14 @@ export default class HeaderList<CustomAttrs extends IHeaderListAttrs = IHeaderLi
     super.onremove(vnode);
 
     if (this.attrs.loadMore) {
-      this.$scrollParent!.off('scroll', this.boundScrollHandler!);
+      this.scrollParent?.removeEventListener('scroll', this.boundScrollHandler!);
     }
   }
 
   scrollHandler() {
     // Whole-page scroll events are listened to on `window`, but we need to get the actual
     // scrollHeight, scrollTop, and clientHeight from the document element.
-    const scrollParent = this.inPanel() ? this.$scrollParent![0] : document.documentElement;
+    const scrollParent = this.inPanel() ? this.scrollParent! : document.documentElement;
 
     // On very short screens, the scrollHeight + scrollTop might not reach the clientHeight
     // by a fraction of a pixel, so we compensate for that.
@@ -84,6 +84,6 @@ export default class HeaderList<CustomAttrs extends IHeaderListAttrs = IHeaderLi
    * we need to listen to scroll events on the window, and get scroll state from the body.
    */
   inPanel() {
-    return this.$content!.css('overflow') === 'auto';
+    return getComputedStyle(this.content!).overflow === 'auto';
   }
 }
diff --git a/framework/core/js/src/forum/components/LogInButton.js b/framework/core/js/src/forum/components/LogInButton.js
index f36da14628..8dd90cd066 100644
--- a/framework/core/js/src/forum/components/LogInButton.js
+++ b/framework/core/js/src/forum/components/LogInButton.js
@@ -17,15 +17,14 @@ export default class LogInButton extends Button {
     attrs.onclick = function () {
       const width = 580;
       const height = 400;
-      const $window = $(window);
 
       window.open(
         app.forum.attribute('baseUrl') + attrs.path,
         'logInPopup',
         `width=${width},` +
           `height=${height},` +
-          `top=${$window.height() / 2 - height / 2},` +
-          `left=${$window.width() / 2 - width / 2},` +
+          `top=${window.innerHeight / 2 - height / 2},` +
+          `left=${window.innerWidth / 2 - width / 2},` +
           'status=no,scrollbars=yes,resizable=no'
       );
     };
diff --git a/framework/core/js/src/forum/components/NotificationGrid.js b/framework/core/js/src/forum/components/NotificationGrid.js
index 81a22ebfbe..ed19435137 100644
--- a/framework/core/js/src/forum/components/NotificationGrid.js
+++ b/framework/core/js/src/forum/components/NotificationGrid.js
@@ -91,19 +91,17 @@ export default class NotificationGrid extends Component {
   oncreate(vnode) {
     super.oncreate(vnode);
 
-    this.$('thead .NotificationGrid-groupToggle').bind('mouseenter mouseleave', function (e) {
-      const i = parseInt($(this).index(), 10) + 1;
-      $(this)
-        .parents('table')
-        .find('td:nth-child(' + i + ')')
-        .toggleClass('highlighted', e.type === 'mouseenter');
+    this.element.querySelectorAll('thead .NotificationGrid-groupToggle').forEach((toggle) => {
+      ['mouseenter', 'mouseleave'].forEach((ev) => toggle.addEventListener(ev, function(e) {
+        const i = parseInt(Array.from(this.parentElement.children).indexOf(this), 10) + 1;
+        this.closest('table').querySelectorAll('td:nth-child(' + i + ')').forEach((td) => td.classList.toggle('highlighted', e.type === 'mouseenter'));
+      }));
     });
 
-    this.$('tbody .NotificationGrid-groupToggle').bind('mouseenter mouseleave', function (e) {
-      $(this)
-        .parent()
-        .find('td')
-        .toggleClass('highlighted', e.type === 'mouseenter');
+    this.element.querySelectorAll('tbody .NotificationGrid-groupToggle').forEach((toggle) => {
+      ['mouseenter', 'mouseleave'].forEach((ev) => toggle.addEventListener(ev, function(e) {
+        this.parentElement.querySelectorAll('td').forEach((td) => td.classList.toggle('highlighted', e.type === 'mouseenter'));
+      }));
     });
   }
 
diff --git a/framework/core/js/src/forum/components/PostMeta.tsx b/framework/core/js/src/forum/components/PostMeta.tsx
index 3e6d9096d3..288d5aecec 100644
--- a/framework/core/js/src/forum/components/PostMeta.tsx
+++ b/framework/core/js/src/forum/components/PostMeta.tsx
@@ -30,7 +30,7 @@ export default class PostMeta<CustomAttrs extends IPostMetaAttrs = IPostMetaAttr
     // When the dropdown menu is shown, select the contents of the permalink
     // input so that the user can quickly copy the URL.
     const selectPermalink = function (this: Element, e: MouseEvent) {
-      setTimeout(() => $(this).parent().find('.PostMeta-permalink').select());
+      setTimeout(() => (this.parentElement?.querySelector('.PostMeta-permalink') as HTMLInputElement)?.select());
 
       e.redraw = false;
     };
diff --git a/framework/core/js/src/forum/components/PostStream.js b/framework/core/js/src/forum/components/PostStream.js
index 570b45b89f..c0545a531c 100644
--- a/framework/core/js/src/forum/components/PostStream.js
+++ b/framework/core/js/src/forum/components/PostStream.js
@@ -6,6 +6,8 @@ import ReplyPlaceholder from './ReplyPlaceholder';
 import Button from '../../common/components/Button';
 import ItemList from '../../common/utils/ItemList';
 import PostType from './PostType';
+import heightWithMargin from '../../common/utils/heightWithMargin';
+import scrollEnd from '../../common/utils/scrollEnd';
 
 /**
  * The `PostStream` component displays an infinitely-scrollable wall of posts in
@@ -36,10 +38,10 @@ export default class PostStream extends Component {
     const postIds = this.discussion.postIds();
 
     const postFadeIn = (vnode) => {
-      $(vnode.dom).addClass('fadeIn');
+      vnode.dom.classList.add('fadeIn');
       // 500 is the duration of the fadeIn CSS animation + 100ms,
       // so the animation has time to complete
-      setTimeout(() => $(vnode.dom).removeClass('fadeIn'), 500);
+      setTimeout(() => vnode.dom.classList.remove('fadeIn'), 500);
     };
 
     const items = posts.map((post, i) => {
@@ -169,7 +171,7 @@ export default class PostStream extends Component {
    *
    * @param {number} top
    */
-  onscroll(top = window.pageYOffset) {
+  onscroll(top = window.screenY) {
     if (this.stream.paused || this.stream.pagesLoading) return;
 
     this.updateScrubber(top);
@@ -188,39 +190,40 @@ export default class PostStream extends Component {
    *
    * @param {number} top
    */
-  loadPostsIfNeeded(top = window.pageYOffset) {
+  loadPostsIfNeeded(top = window.screenY) {
     const marginTop = this.getMarginTop();
-    const viewportHeight = $(window).height() - marginTop;
+    const viewportHeight = window.innerHeight - marginTop;
     const viewportTop = top + marginTop;
     const loadAheadDistance = 300;
 
     if (this.stream.visibleStart > 0) {
-      const $item = this.$('.PostStream-item[data-index=' + this.stream.visibleStart + ']');
+      const item = this.element.querySelector(`.PostStream-item[data-index='${this.stream.visibleStart}']`);
 
-      if ($item.length && $item.offset().top > viewportTop - loadAheadDistance) {
+      if (item && item.getBoundingClientRect().top + document.documentElement.scrollTop > viewportTop - loadAheadDistance) {
         this.stream.loadPrevious();
       }
     }
 
     if (this.stream.visibleEnd < this.stream.count()) {
-      const $item = this.$('.PostStream-item[data-index=' + (this.stream.visibleEnd - 1) + ']');
+      const item = this.element.querySelector(`.PostStream-item[data-index='${this.stream.visibleEnd - 1}']`);
+      const itemRect = item?.getBoundingClientRect();
 
-      if ($item.length && $item.offset().top + $item.outerHeight(true) < viewportTop + viewportHeight + loadAheadDistance) {
+      if (item && itemRect.top + document.documentElement.scrollTop + heightWithMargin(item) < viewportTop + viewportHeight + loadAheadDistance) {
         this.stream.loadNext();
       }
     }
   }
 
-  updateScrubber(top = window.pageYOffset) {
+  updateScrubber(top = window.screenY) {
     const marginTop = this.getMarginTop();
-    const viewportHeight = $(window).height() - marginTop;
+    const viewportHeight = window.innerHeight - marginTop;
     const viewportTop = top + marginTop;
 
     // Before looping through all of the posts, we reset the scrollbar
     // properties to a 'default' state. These values reflect what would be
     // seen if the browser were scrolled right up to the top of the page,
     // and the viewport had a height of 0.
-    const $items = this.$('.PostStream-item[data-index]');
+    const items = this.element.querySelectorAll('.PostStream-item[data-index]');
     let visible = 0;
     let period = '';
     let indexFromViewPort = null;
@@ -228,10 +231,9 @@ export default class PostStream extends Component {
     // Now loop through each of the items in the discussion. An 'item' is
     // either a single post or a 'gap' of one or more posts that haven't
     // been loaded yet.
-    $items.each(function () {
-      const $this = $(this);
-      const top = $this.offset().top;
-      const height = $this.outerHeight(true);
+    items.forEach((el) => {
+      const top = el.getBoundingClientRect().top + document.documentElement.scrollTop;
+      const height = heightWithMargin(el);
 
       // If this item is above the top of the viewport, skip to the next
       // one. If it's below the bottom of the viewport, break out of the
@@ -252,7 +254,7 @@ export default class PostStream extends Component {
       // We take the index of the first item that passed the previous checks.
       // It is the item that is first visible in the viewport.
       if (indexFromViewPort === null) {
-        indexFromViewPort = parseFloat($this.data('index')) + visibleTop / height;
+        indexFromViewPort = parseFloat(el.getAttribute('data-index')) + visibleTop / height;
       }
 
       if (visiblePost > 0) {
@@ -261,7 +263,7 @@ export default class PostStream extends Component {
 
       // If this item has a time associated with it, then set the
       // scrollbar's current period to a formatted version of this time.
-      const time = $this.data('time');
+      const time = el.getAttribute('data-time');
       if (time) period = time;
     });
 
@@ -277,32 +279,30 @@ export default class PostStream extends Component {
    * Work out which posts (by number) are currently visible in the viewport, and
    * fire an event with the information.
    */
-  calculatePosition(top = window.pageYOffset) {
+  calculatePosition(top = window.scrollY) {
     const marginTop = this.getMarginTop();
-    const $window = $(window);
-    const viewportHeight = $window.height() - marginTop;
-    const scrollTop = $window.scrollTop() + marginTop;
+    const viewportHeight = window.innerHeight - marginTop;
+    const scrollTop = document.documentElement.scrollTop + marginTop;
     const viewportTop = top + marginTop;
 
     let startNumber;
     let endNumber;
 
-    this.$('.PostStream-item').each(function () {
-      const $item = $(this);
-      const top = $item.offset().top;
-      const height = $item.outerHeight(true);
+    this.element.querySelectorAll('.PostStream-item').forEach((el) => {
+      const top = el.getBoundingClientRect().top + document.documentElement.scrollTop;
+      const height = heightWithMargin(el);
       const visibleTop = Math.max(0, viewportTop - top);
 
       const threeQuartersVisible = visibleTop / height < 0.75;
       const coversQuarterOfViewport = (height - visibleTop) / viewportHeight > 0.25;
       if (startNumber === undefined && (threeQuartersVisible || coversQuarterOfViewport)) {
-        startNumber = $item.data('number');
+        startNumber = parseInt(el.getAttribute('data-number'));
       }
 
       if (top + height > scrollTop) {
         if (top + height < scrollTop + viewportHeight) {
-          if ($item.data('number')) {
-            endNumber = $item.data('number');
+          if (el.getAttribute('data-number')) {
+            endNumber = parseInt(el.getAttribute('data-number'));
           }
         } else return false;
       }
@@ -320,9 +320,9 @@ export default class PostStream extends Component {
    * @return {number}
    */
   getMarginTop() {
-    const headerId = app.screen() === 'phone' ? '#app-navigation' : '#header';
+    const headerId = app.screen() === 'phone' ? 'app-navigation' : 'header';
 
-    return this.$() && $(headerId).outerHeight() + parseInt(this.$().css('margin-top'), 10);
+    return this.element && document.getElementById(headerId).getBoundingClientRect().height + parseInt(getComputedStyle(this.element).marginTop, 10);
   }
 
   /**
@@ -330,12 +330,12 @@ export default class PostStream extends Component {
    *
    * @param {number} number
    * @param {boolean} animate
-   * @return {JQueryDeferred}
+   * @return {Promise}
    */
   scrollToNumber(number, animate) {
-    const $item = this.$(`.PostStream-item[data-number=${number}]`);
+    const item = this.element.querySelector(`.PostStream-item[data-number='${number}']`);
 
-    return this.scrollToItem($item, animate).then(this.flashItem.bind(this, $item));
+    return this.scrollToItem(item, animate).then(this.flashItem.bind(this, item));
   }
 
   /**
@@ -344,50 +344,45 @@ export default class PostStream extends Component {
    * @param {number} index
    * @param {boolean} animate
    * @param {boolean} reply Whether or not to scroll to the reply placeholder.
-   * @return {JQueryDeferred}
+   * @return {Promise}
    */
   scrollToIndex(index, animate, reply) {
-    const $item = reply ? $('.PostStream-item:last-child') : this.$(`.PostStream-item[data-index=${index}]`);
+    const item = reply ? document.querySelector('.PostStream-item:last-child') : this.element.querySelector(`.PostStream-item[data-index='${index}']`);
 
-    this.scrollToItem($item, animate, true, reply);
+    this.scrollToItem(item, animate, true, reply);
 
     if (reply) {
-      this.flashItem($item);
+      this.flashItem(item);
     }
   }
 
   /**
    * Scroll down to the given post.
    *
-   * @param {JQuery} $item
+   * @param {HTMLElement} item
    * @param {boolean} animate
    * @param {boolean} force Whether or not to force scrolling to the item, even
    *     if it is already in the viewport.
    * @param {boolean} reply Whether or not to scroll to the reply placeholder.
-   * @return {JQueryDeferred}
+   * @return {Promise}
    */
-  scrollToItem($item, animate, force, reply) {
-    const $container = $('html, body').stop(true);
-    const index = $item.data('index');
+  scrollToItem(item, animate, force, reply) {
+    if (!item) return;
+    const index = parseInt(item.getAttribute('data-index'));
 
-    if ($item.length) {
-      const itemTop = $item.offset().top - this.getMarginTop();
-      const itemBottom = $item.offset().top + $item.height();
-      const scrollTop = $(document).scrollTop();
-      const scrollBottom = scrollTop + $(window).height();
+    const itemTopOffset = item.getBoundingClientRect().top + document.documentElement.scrollTop;
+      const itemTop = itemTopOffset- this.getMarginTop();
+      const itemBottom = itemTopOffset + item.clientHeight;
+      const scrollTop = document.documentElement.scrollTop;
+      const scrollBottom = scrollTop + window.innerHeight;
 
       // If the item is already in the viewport, we may not need to scroll.
       // If we're scrolling to the reply placeholder, we'll make sure its
       // bottom will line up with the top of the composer.
       if (force || itemTop < scrollTop || itemBottom > scrollBottom) {
-        const top = reply ? itemBottom - $(window).height() + app.composer.computedHeight() : $item.is(':first-child') ? 0 : itemTop;
+        const top = reply ? itemBottom - window.innerHeight + app.composer.computedHeight() : item.parentElement.children[0] == item ? 0 : itemTop;
 
-        if (!animate) {
-          $container.scrollTop(top);
-        } else if (top !== scrollTop) {
-          $container.animate({ scrollTop: top }, 'fast');
-        }
-      }
+          document.documentElement.scrollTo({ top, behavior: animate ? 'smooth' : 'instant' });
     }
 
     const updateScrubberHeight = () => {
@@ -402,7 +397,7 @@ export default class PostStream extends Component {
     updateScrubberHeight();
     this.stream.forceUpdateScrubber = true;
 
-    return Promise.all([$container.promise(), this.stream.loadPromise]).then(() => {
+    return Promise.all([scrollEnd(document.documentElement), this.stream.loadPromise]).then(() => {
       m.redraw.sync();
 
       // Rendering post contents will probably throw off our position.
@@ -413,14 +408,14 @@ export default class PostStream extends Component {
       // If the post does not currently exist, it's probably
       // outside of the range we loaded in, so we won't adjust anything,
       // as it will soon be rendered by the "load more" system.
-      let itemOffset;
+      let itemRect;
       if (reply) {
-        const $placeholder = $('.PostStream-item:last-child');
-        $(window).scrollTop($placeholder.offset().top + $placeholder.height() - $(window).height() + app.composer.computedHeight());
+        const placeholder = document.querySelector('.PostStream-item:last-child');
+        window.scrollTo({ top: placeholder.getBoundingClientRect().top + document.documentElement.scrollTop + placeholder.clientHeight - window.innerHeight + app.composer.computedHeight() });
       } else if (index === 0) {
-        $(window).scrollTop(0);
-      } else if ((itemOffset = $(`.PostStream-item[data-index=${index}]`).offset())) {
-        $(window).scrollTop(itemOffset.top - this.getMarginTop());
+        window.scrollTo({ top: 0 });
+      } else if ((itemRect = document.querySelector(`.PostStream-item[data-index='${index}']`))) {
+        window.scrollTo({ top: itemRect.top + document.documentElement.scrollTop - this.getMarginTop() });
       }
 
       // We want to adjust this again after posts have been loaded in
@@ -437,14 +432,15 @@ export default class PostStream extends Component {
   /**
    * 'Flash' the given post, drawing the user's attention to it.
    *
-   * @param {JQuery} $item
+   * @param {HTMLElement} item
    */
-  flashItem($item) {
+  flashItem(item) {
     // This might execute before the fadeIn class has been removed in PostStreamItem's
     // oncreate, so we remove it just to be safe and avoid a double animation.
-    $item.removeClass('fadeIn');
-    $item.addClass('flash').on('animationend webkitAnimationEnd', (e) => {
-      $item.removeClass('flash');
+    item.classList.remove('fadeIn');
+    item.classList.add('flash');
+    item.addEventListener('animationend', (e) => {
+      item.classList.remove('flash');
     });
   }
 }
diff --git a/framework/core/js/src/forum/components/PostsPage.tsx b/framework/core/js/src/forum/components/PostsPage.tsx
index a267a7fc07..1e572488a4 100644
--- a/framework/core/js/src/forum/components/PostsPage.tsx
+++ b/framework/core/js/src/forum/components/PostsPage.tsx
@@ -62,7 +62,8 @@ export default class PostsPage<CustomAttrs extends IPostsPageAttrs = IPostsPageA
   onremove(vnode: Mithril.VnodeDOM<CustomAttrs, this>) {
     super.onremove(vnode);
 
-    $('#app').css('min-height', '');
+    const app = document.getElementById('app');
+    if (app) app.style.minHeight = '';
   }
 
   /**
diff --git a/framework/core/js/src/forum/components/ReplyPlaceholder.tsx b/framework/core/js/src/forum/components/ReplyPlaceholder.tsx
index 797b781faf..d461457124 100644
--- a/framework/core/js/src/forum/components/ReplyPlaceholder.tsx
+++ b/framework/core/js/src/forum/components/ReplyPlaceholder.tsx
@@ -68,12 +68,12 @@ export default class ReplyPlaceholder<CustomAttrs extends IReplyPlaceholderAttrs
   }
 
   anchorPreview(preview: () => void) {
-    const anchorToBottom = $(window).scrollTop()! + $(window).height()! >= $(document).height()!;
+    const anchorToBottom = document.documentElement.scrollTop + window.innerHeight >= document.documentElement.clientHeight;
 
     preview();
 
     if (anchorToBottom) {
-      $(window).scrollTop($(document).height()!);
+      window.scrollTo({ top: document.documentElement.clientHeight });
     }
   }
 }
diff --git a/framework/core/js/src/forum/components/Search.tsx b/framework/core/js/src/forum/components/Search.tsx
index a42b0f8671..c62a6f8032 100644
--- a/framework/core/js/src/forum/components/Search.tsx
+++ b/framework/core/js/src/forum/components/Search.tsx
@@ -249,7 +249,7 @@ export default class Search<T extends SearchAttrs = SearchAttrs> extends Compone
     });
     input.addEventListener('focus', function() {
       this.addEventListener('mouseup', (e) => e.preventDefault(), { once: true });
-      this.dispatchEvent(new Event('select'));
+      this.select();
     });
 
     this.updateMaxHeightHandler = this.updateMaxHeight.bind(this);
diff --git a/framework/core/js/src/forum/components/SignUpModal.tsx b/framework/core/js/src/forum/components/SignUpModal.tsx
index e34da6bbe6..0ec0c84fbf 100644
--- a/framework/core/js/src/forum/components/SignUpModal.tsx
+++ b/framework/core/js/src/forum/components/SignUpModal.tsx
@@ -159,9 +159,9 @@ export default class SignUpModal<CustomAttrs extends ISignupModalAttrs = ISignup
 
   onready() {
     if (this.attrs.username && !this.attrs.email) {
-      this.$('[name=email]').select();
+      (this.element.querySelector('[name=email]') as HTMLInputElement)?.select();
     } else {
-      this.$('[name=username]').select();
+      (this.element.querySelector('[name=username]') as HTMLInputElement)?.select();
     }
   }
 
diff --git a/framework/core/js/src/forum/components/WelcomeHero.tsx b/framework/core/js/src/forum/components/WelcomeHero.tsx
index 48213dbe99..18d20be465 100644
--- a/framework/core/js/src/forum/components/WelcomeHero.tsx
+++ b/framework/core/js/src/forum/components/WelcomeHero.tsx
@@ -21,7 +21,19 @@ export default class WelcomeHero extends Component<IWelcomeHeroAttrs> {
     if (this.isHidden()) return null;
 
     const slideUp = () => {
-      this.$().slideUp(this.hide.bind(this));
+      const el = this.element as HTMLElement;
+      el.style.height = el.clientHeight + 'px';
+      el.style.overflow = 'hidden';
+      const anim = el.animate({
+        'height': '0'
+      }, {
+        duration: 400
+      });
+      anim.addEventListener('finish', () => {
+        el.style.height = '0';
+        anim.cancel();
+      })
+      anim.addEventListener('finish', this.hide.bind(this));
     };
 
     return (
diff --git a/framework/core/js/src/forum/states/ComposerState.tsx b/framework/core/js/src/forum/states/ComposerState.tsx
index 2897daf8d6..1464395f1a 100644
--- a/framework/core/js/src/forum/states/ComposerState.tsx
+++ b/framework/core/js/src/forum/states/ComposerState.tsx
@@ -262,7 +262,7 @@ class ComposerState {
    * Maximum height of the Composer.
    */
   maximumHeight(): number {
-    return $(window).height()! - $('#header').outerHeight()!;
+    return window.innerHeight - document.getElementById('header')!.getBoundingClientRect().height;
   }
 
   /**
@@ -277,7 +277,7 @@ class ComposerState {
     if (this.position === ComposerState.Position.MINIMIZED) {
       return '';
     } else if (this.position === ComposerState.Position.FULLSCREEN) {
-      return $(window).height()!;
+      return window.innerHeight;
     }
 
     // Otherwise, if it's normal or hidden, then we use the intended height.
diff --git a/framework/core/less/forum/Post.less b/framework/core/less/forum/Post.less
index c434150040..742aa57506 100644
--- a/framework/core/less/forum/Post.less
+++ b/framework/core/less/forum/Post.less
@@ -42,7 +42,7 @@
     transform-origin: left top;
     opacity: 0;
 
-    &.in {
+    &.show {
       transform: scale(1);
       opacity: 1;
     }