From 6c88b212d2b95a82c91f455309894aed57b6a3a7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 26 Jun 2026 15:28:53 +0300
Subject: [PATCH 01/53] not using port 5050 anymore

---
 .gitlab-ci.yml         | 2 +-
 docker-compose.e2e.yml | 2 +-
 tools/e2e/run.sh       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 247218091..4c8d0fb27 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -157,7 +157,7 @@ e2e-pleroma:
   variables:
     PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
     FF_NETWORK_PER_BUILD: "true"
-    PLEROMA_IMAGE: git.pleroma.social:5050/pleroma/pleroma:stable
+    PLEROMA_IMAGE: git.pleroma.social/pleroma/pleroma:stable
     POSTGRES_USER: pleroma
     POSTGRES_PASSWORD: pleroma
     POSTGRES_DB: pleroma
diff --git a/docker-compose.e2e.yml b/docker-compose.e2e.yml
index 75a4979a1..114c22f7f 100644
--- a/docker-compose.e2e.yml
+++ b/docker-compose.e2e.yml
@@ -12,7 +12,7 @@ services:
       retries: 30
 
   pleroma:
-    image: ${PLEROMA_IMAGE:-git.pleroma.social:5050/pleroma/pleroma:stable}
+    image: ${PLEROMA_IMAGE:-git.pleroma.social/pleroma/pleroma:stable}
     environment:
       DB_USER: pleroma
       DB_PASS: pleroma
diff --git a/tools/e2e/run.sh b/tools/e2e/run.sh
index 3c0ba8a36..452302cbd 100644
--- a/tools/e2e/run.sh
+++ b/tools/e2e/run.sh
@@ -5,7 +5,7 @@ set -u
 COMPOSE_FILE="docker-compose.e2e.yml"
 
 : "${COMPOSE_MENU:=false}"
-: "${PLEROMA_IMAGE:=git.pleroma.social:5050/pleroma/pleroma:stable}"
+: "${PLEROMA_IMAGE:=git.pleroma.social/pleroma/pleroma:stable}"
 : "${E2E_ADMIN_USERNAME:=admin}"
 : "${E2E_ADMIN_PASSWORD:=adminadmin}"
 : "${E2E_ADMIN_EMAIL:=admin@example.com}"

From 89d3bc3cce820132129b56368d4194bd0c31d615 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 26 Jun 2026 15:53:34 +0300
Subject: [PATCH 02/53] missing follow button is just weird

---
 src/components/user_card/user_card.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 31a513130..f3e2b8f85 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -15,6 +15,7 @@ import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import Select from 'src/components/select/select.vue'
 import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UserLink from 'src/components/user_link/user_link.vue'
+import FollowButton from 'src/components/follow_button/follow_button.vue'
 
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
@@ -138,9 +139,7 @@ export default {
       () => import('src/components/account_actions/account_actions.vue'),
     ),
     ProgressButton,
-    FollowButton: defineAsyncComponent(
-      () => import('src/components/follow_button/follow_button.vue'),
-    ),
+    FollowButton,
     Select,
     UserLink,
     UserNote: defineAsyncComponent(

From ac538da1d82716fb5368bc146b347253b39c75e2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 26 Jun 2026 16:01:30 +0300
Subject: [PATCH 03/53] testing global error handling

---
 src/boot/after_store.js | 5 +++++
 src/stores/interface.js | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 0b4825ca0..bc86cb1e4 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -467,6 +467,11 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   // "Plugins are only applied to stores created after the plugins themselves, and after pinia is passed to the app, otherwise they won't be applied."
   app.use(pinia)
 
+  app.config.errorHandler = (error, instance, info) => {
+    console.error('GLOBAL ERROR HANDLER', error, instance, info)
+    useInterfaceStore().setGlobalError({ error, instance, info })
+  }
+
   const waitForAllStoresToLoad = async () => {
     // the stores that do not persist technically do not need to be awaited here,
     // but that involves either hard-coding the stores in some place (prone to errors)
diff --git a/src/stores/interface.js b/src/stores/interface.js
index 21c1e9f8a..4d5d2a8e4 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -58,6 +58,7 @@ export const useInterfaceStore = defineStore('interface', {
     },
     layoutType: 'normal',
     globalNotices: [],
+    globalError: null,
     layoutHeight: 0,
     lastTimeline: null,
     foreignProfileBackground: null,
@@ -176,6 +177,9 @@ export const useInterfaceStore = defineStore('interface', {
     removeGlobalNotice(notice) {
       this.globalNotices = this.globalNotices.filter((n) => n !== notice)
     },
+    setGlobalError(data) {
+      this.globalError = data
+    },
     pushGlobalNotice({
       messageKey,
       messageArgs = {},

From c898d9b70285df887cf00e551eada1c1f68a103d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 26 Jun 2026 16:05:32 +0300
Subject: [PATCH 04/53] stop loading auth form async

---
 src/components/user_panel/user_panel.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
index ac6bc669c..dd1da869e 100644
--- a/src/components/user_panel/user_panel.js
+++ b/src/components/user_panel/user_panel.js
@@ -3,6 +3,7 @@ import { mapState } from 'vuex'
 
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import UserCard from 'src/components/user_card/user_card.vue'
+import AuthForm from 'src/components/auth_form/auth_form.js'
 
 const UserPanel = {
   computed: {
@@ -12,9 +13,6 @@ const UserPanel = {
     ...mapState({ user: (state) => state.users.currentUser }),
   },
   components: {
-    AuthForm: defineAsyncComponent(
-      () => import('src/components/auth_form/auth_form.js'),
-    ),
     PostStatusForm,
     UserCard,
   },

From 670edf3006bd77ba1c7a708b5fd3ac6cd4b62637 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 26 Jun 2026 17:43:57 +0300
Subject: [PATCH 05/53] Added error handling and handle async component failing

---
 src/App.js                                   |   2 +
 src/App.scss                                 |  13 +++
 src/App.vue                                  |   1 +
 src/components/error_modal/error_modal.js    |  36 +++++++
 src/components/error_modal/error_modal.vue   | 100 +++++++++++++++++++
 src/components/global_error/global_error.js  |  52 ++++++++++
 src/components/global_error/global_error.vue |  23 +++++
 src/i18n/en.json                             |   4 +
 src/stores/interface.js                      |  25 ++++-
 9 files changed, 254 insertions(+), 2 deletions(-)
 create mode 100644 src/components/error_modal/error_modal.js
 create mode 100644 src/components/error_modal/error_modal.vue
 create mode 100644 src/components/global_error/global_error.js
 create mode 100644 src/components/global_error/global_error.vue

diff --git a/src/App.js b/src/App.js
index 7de7a0696..934b96713 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import { defineAsyncComponent } from 'vue'
 
 import DesktopNav from 'src/components/desktop_nav/desktop_nav.vue'
 import FeaturesPanel from 'src/components/features_panel/features_panel.vue'
+import GlobalError from 'src/components/global_error/global_error.vue'
 import GlobalNoticeList from 'src/components/global_notice_list/global_notice_list.vue'
 import InstanceSpecificPanel from 'src/components/instance_specific_panel/instance_specific_panel.vue'
 import MobileNav from 'src/components/mobile_nav/mobile_nav.vue'
@@ -68,6 +69,7 @@ export default {
       () =>
         import('src/components/status_history_modal/status_history_modal.vue'),
     ),
+    GlobalError,
     GlobalNoticeList,
   },
   data: () => ({
diff --git a/src/App.scss b/src/App.scss
index 9618a2ac4..02db8f531 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -144,6 +144,19 @@ h4 {
   margin: 0;
 }
 
+code {
+  background: var(--bg);
+  border: 1px solid var(--fg);
+  border-radius: var(--roundness);
+  margin: 0.2em;
+  padding: 0 0.2em;
+
+  &.pre {
+    white-space: pre;
+    display: block;
+  }
+}
+
 .iconLetter {
   display: inline-block;
   text-align: center;
diff --git a/src/App.vue b/src/App.vue
index c1a7199d7..84a6f7d3d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -73,6 +73,7 @@
     <StatusHistoryModal v-if="editingAvailable" />
     <SettingsModal :class="layoutModalClass" />
     <UpdateNotification />
+    <GlobalError />
     <GlobalNoticeList />
   </div>
 </template>
diff --git a/src/components/error_modal/error_modal.js b/src/components/error_modal/error_modal.js
new file mode 100644
index 000000000..aaa9f99ec
--- /dev/null
+++ b/src/components/error_modal/error_modal.js
@@ -0,0 +1,36 @@
+import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faCircleXmark)
+
+/**
+ * This component emits the following events:
+ * cancelled, emitted when the action should not be performed;
+ * accepted, emitted when the action should be performed;
+ *
+ * The caller should close this dialog after receiving any of the two events.
+ */
+const ErrorModal = {
+  components: {
+    DialogModal,
+  },
+  props: {
+    title: {
+      type: String,
+    },
+    clearText: {
+      type: String,
+    },
+    recoverText: {
+      type: String,
+    },
+    error: {
+      type: Error,
+    },
+  },
+  emits: ['clear', 'recover']
+}
+
+export default ErrorModal
diff --git a/src/components/error_modal/error_modal.vue b/src/components/error_modal/error_modal.vue
new file mode 100644
index 000000000..7429e8bdc
--- /dev/null
+++ b/src/components/error_modal/error_modal.vue
@@ -0,0 +1,100 @@
+<template>
+  <DialogModal
+    v-body-scroll-lock="true"
+    class="error-modal"
+    @cancel="onCancel"
+  >
+    <template #header>
+      <span v-text="title ?? $t('general.generic_error')" />
+    </template>
+
+    <div class="content">
+      <FAIcon
+        class="error-icon"
+        icon="circle-xmark"
+        size="3x"
+        fixed-width
+      />
+      <div class="text">
+        <slot>
+          <p>
+            <strong><code v-text="error.name" /></strong>
+            {{ ' - ' }}
+            <span v-text="error.message" />
+          </p>
+
+          <details open>
+            <summary>{{ $t('general.generic_error_details') }}</summary>
+            <code class="stack pre" v-text="error.stack" />
+          </details>
+        </slot>
+      </div>
+    </div>
+    <div class="below">
+      <slot name="below" />
+    </div>
+    <template #footer>
+      <slot name="footerLeft" />
+
+      <button
+        v-if="recoverText"
+        class="btn button-default"
+        @click.prevent="$emit('recover')"
+        v-text="recoverText"
+      />
+
+      <button
+        class="btn button-default"
+        @click.prevent="$emit('clear')"
+        v-text="clearText ?? $t('general.close')"
+      />
+    </template>
+  </DialogModal>
+</template>
+
+<script src="./error_modal.js"></script>
+<style lang="scss">
+.error-modal {
+  .error-icon {
+    margin-left: 0.75rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .content {
+    display: flex;
+    align-items: center;
+    text-align: left;
+    justify-content: center;
+    line-height: 1.5;
+
+    p {
+      margin-top: 0.75em;
+      margin-bottom: 0.75em;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .stack {
+    margin: 0;
+    overflow-x: auto;
+  }
+
+  .below:not(:empty) {
+    margin-top: 1em;
+  }
+
+  .text {
+    max-width: 50ch;
+    margin-left: 0.5em;
+    margin-right: 3.5em;
+  }
+}
+</style>
diff --git a/src/components/global_error/global_error.js b/src/components/global_error/global_error.js
new file mode 100644
index 000000000..0f826f4c4
--- /dev/null
+++ b/src/components/global_error/global_error.js
@@ -0,0 +1,52 @@
+import ErrorModal from 'src/components/error_modal/error_modal.vue'
+
+import { useInterfaceStore } from 'src/stores/interface.js'
+
+import { mapState, mapActions } from 'pinia'
+
+const GlobalError = {
+  components: {
+    ErrorModal,
+  },
+  computed: {
+    title() {
+      if (this.globalError == null) return null
+      return this.globalError.title && this.$t(this.globalError.title)
+    },
+    content() {
+      if (this.globalError == null) return null
+      if (this.globalError.content) {
+        return this.$t(this.globalError.content, [this.globalError.error])
+      } else {
+        return null
+      }
+    },
+    details() {
+      if (this.globalError == null) return null
+      if (this.globalError.error != null) {
+        return this.globalError.error.toString() + '\n\n' + this.globalError.error.stack
+      } else {
+        return this.globalError.details
+      }
+    },
+    recoverText() {
+      if (this.globalError == null) return null
+      if (this.globalError.recoverText == null) return null
+      return this.$t(this.globalError.recoverText)
+    },
+    ...mapState(useInterfaceStore, ['globalError']),
+  },
+  methods: {
+    clear() {
+      this.globalError.clear?.()
+      this.clearGlobalError()
+    },
+    recover() {
+      this.globalError.recover?.()
+      this.clearGlobalError()
+    },
+    ...mapActions(useInterfaceStore, ['clearGlobalError']),
+  },
+}
+
+export default GlobalError
diff --git a/src/components/global_error/global_error.vue b/src/components/global_error/global_error.vue
new file mode 100644
index 000000000..3c3901d4f
--- /dev/null
+++ b/src/components/global_error/global_error.vue
@@ -0,0 +1,23 @@
+<template>
+  <teleport to="#modal">
+    <ErrorModal
+      v-if="globalError"
+      :error="globalError.error"
+      :title="title"
+      :recover-text="recoverText"
+      @recover="recover"
+      @clear="clear"
+    >
+      <template v-if="content">
+        <p>{{ content }}</p>
+
+        <details v-if="details">
+          <summary>{{ $t('general.generic_error_details') }}</summary>
+          <code class="stack pre" v-text="details" />
+        </details>
+      </template>
+    </ErrorModal>
+  </teleport>
+</template>
+
+<script src="./global_error.js"></script>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 10ce5704b..62cce21e8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -90,7 +90,11 @@
     "loading": "Loading…",
     "generic_error": "An error occured",
     "generic_error_message": "An error occured: {0}",
+    "generic_error_details": "Technical info:",
     "error_retry": "Please try again",
+    "refresh_required": "Refresh required",
+    "refresh_required_content": "Frontend was updated on server, you need to refresh the page.",
+    "refresh_required_refresh": "Refresh",
     "retry": "Try again",
     "optional": "optional",
     "show_more": "Show more",
diff --git a/src/stores/interface.js b/src/stores/interface.js
index 4d5d2a8e4..e76a23cc2 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -177,8 +177,29 @@ export const useInterfaceStore = defineStore('interface', {
     removeGlobalNotice(notice) {
       this.globalNotices = this.globalNotices.filter((n) => n !== notice)
     },
-    setGlobalError(data) {
-      this.globalError = data
+    setGlobalError({ error, instance, info }) {
+      console.log(info)
+      switch (info) {
+        case 'https://vuejs.org/error-reference/#runtime-13': {
+          this.globalError = {
+            title: 'general.refresh_required',
+            content: 'general.refresh_required_content',
+            // `true` disables cache on Firefox (non-standard)
+            recover: () => window.location.reload(true),
+            recoverText: 'general.refresh_required_refresh',
+            error,
+          }
+          break
+        }
+        default: {
+          this.globalError = { error }
+          break
+        }
+      }
+      console.log(this.globalError)
+    },
+    clearGlobalError() {
+      this.globalError = null;
     },
     pushGlobalNotice({
       messageKey,

From 7966b0b97fb77bf6804dabe84edf476d7e9d5388 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 26 Jun 2026 17:48:35 +0300
Subject: [PATCH 06/53] better wording

---
 src/i18n/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 62cce21e8..7da5524db 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -93,8 +93,8 @@
     "generic_error_details": "Technical info:",
     "error_retry": "Please try again",
     "refresh_required": "Refresh required",
-    "refresh_required_content": "Frontend was updated on server, you need to refresh the page.",
-    "refresh_required_refresh": "Refresh",
+    "refresh_required_content": "Failed to load UI code. Most likely frontend was updated on server, you'll need to refresh the page.",
+    "refresh_required_refresh": "Refresh page",
     "retry": "Try again",
     "optional": "optional",
     "show_more": "Show more",

From 142e8cbf2f88247e6d60a35e79e68077c28673c4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 03:22:20 +0300
Subject: [PATCH 07/53] fix crash in mobile nav

---
 src/components/mobile_nav/mobile_nav.js  | 3 ---
 src/components/mobile_nav/mobile_nav.vue | 1 +
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 41cc4f457..b47376d53 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -152,9 +152,6 @@ const MobileNav = {
     },
     onScroll({ target: { scrollTop, clientHeight, scrollHeight } }) {
       this.notificationsAtTop = scrollTop > 0
-      if (scrollTop + clientHeight >= scrollHeight) {
-        this.$refs.notifications.fetchOlderNotifications()
-      }
     },
   },
   watch: {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 09009782a..743b7deb0 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -94,6 +94,7 @@
           />
         </button>
       </div>
+      <!-- Notifications teleport target -->
       <div
         id="mobile-notifications"
         ref="mobileNotifications"

From 6fad7244207f8af3a51be259ea34fbaf63cdfc66 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 03:27:58 +0300
Subject: [PATCH 08/53] improve code display styles

---
 src/App.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 02db8f531..be3f0df22 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -148,9 +148,15 @@ code {
   background: var(--bg);
   border: 1px solid var(--fg);
   border-radius: var(--roundness);
-  margin: 0.2em;
   padding: 0 0.2em;
 
+  & pre,
+  pre & {
+    display: block;
+    overflow-x: auto;
+    padding: 0.2em;
+  }
+
   &.pre {
     white-space: pre;
     display: block;

From cc594440116231c48731d1276f50078fbcc092d2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 03:37:56 +0300
Subject: [PATCH 09/53] fix registration reason

---
 .../basic_user_card/basic_user_card.vue           |  3 ++-
 .../admin_tabs/admin_user_card.scss               | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 2de8b7b36..49786bf1b 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -54,7 +54,8 @@
 <style lang="scss">
 .basic-user-card {
   display: flex;
-  flex: 1 0;
+  flex: 1 1 10em;
+  min-width: 1em;
   margin: 0;
   line-height: 1.25;
 
diff --git a/src/components/settings_modal/admin_tabs/admin_user_card.scss b/src/components/settings_modal/admin_tabs/admin_user_card.scss
index a9010afdc..a1f685aec 100644
--- a/src/components/settings_modal/admin_tabs/admin_user_card.scss
+++ b/src/components/settings_modal/admin_tabs/admin_user_card.scss
@@ -1,4 +1,19 @@
 .AdminUserCard {
+  details {
+    white-space: normal;
+
+    summary {
+      font-weight: bold;
+    }
+
+    span {
+      display: block;
+      max-height: 6.5em;
+      overflow-y: auto;
+      resize: vertical;
+    }
+  }
+
   .right-side {
     align-items: baseline;
     justify-content: end;

From ad65719ef46e1d1e41a05e5018e4f254075b0a0f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 03:38:56 +0300
Subject: [PATCH 10/53] should fix vaartis error?

---
 src/modules/statuses.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 445d1d436..5bc852be1 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -883,7 +883,7 @@ const statuses = {
           'addNewUsers',
           data.statuses.map((s) => s.user).filter((u) => u),
         )
-        data.statuses = store.commit('addNewStatuses', {
+        data.statuses = store.dispatch('addNewStatuses', {
           statuses: data.statuses,
         })
         return data

From 97fdee5c9dc90ac4beec51b569be32b3286b3d3f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 04:02:13 +0300
Subject: [PATCH 11/53] lint and sw fixes

---
 src/components/error_modal/error_modal.js   |  2 +-
 src/components/global_error/global_error.js | 10 +++++++---
 src/components/user_card/user_card.js       |  2 +-
 src/components/user_panel/user_panel.js     |  4 ++--
 src/components/user_panel/user_panel.vue    |  2 +-
 src/stores/interface.js                     |  2 +-
 src/sw.js                                   |  1 +
 7 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/error_modal/error_modal.js b/src/components/error_modal/error_modal.js
index aaa9f99ec..560de3a53 100644
--- a/src/components/error_modal/error_modal.js
+++ b/src/components/error_modal/error_modal.js
@@ -30,7 +30,7 @@ const ErrorModal = {
       type: Error,
     },
   },
-  emits: ['clear', 'recover']
+  emits: ['clear', 'recover'],
 }
 
 export default ErrorModal
diff --git a/src/components/global_error/global_error.js b/src/components/global_error/global_error.js
index 0f826f4c4..cd4593521 100644
--- a/src/components/global_error/global_error.js
+++ b/src/components/global_error/global_error.js
@@ -1,9 +1,9 @@
+import { mapActions, mapState } from 'pinia'
+
 import ErrorModal from 'src/components/error_modal/error_modal.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
 
-import { mapState, mapActions } from 'pinia'
-
 const GlobalError = {
   components: {
     ErrorModal,
@@ -24,7 +24,11 @@ const GlobalError = {
     details() {
       if (this.globalError == null) return null
       if (this.globalError.error != null) {
-        return this.globalError.error.toString() + '\n\n' + this.globalError.error.stack
+        return (
+          this.globalError.error.toString() +
+          '\n\n' +
+          this.globalError.error.stack
+        )
       } else {
         return this.globalError.details
       }
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index f3e2b8f85..267be8bfd 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -11,11 +11,11 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ColorInput from 'src/components/color_input/color_input.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
+import FollowButton from 'src/components/follow_button/follow_button.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import Select from 'src/components/select/select.vue'
 import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UserLink from 'src/components/user_link/user_link.vue'
-import FollowButton from 'src/components/follow_button/follow_button.vue'
 
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
index dd1da869e..08270a1c6 100644
--- a/src/components/user_panel/user_panel.js
+++ b/src/components/user_panel/user_panel.js
@@ -1,9 +1,8 @@
-import { defineAsyncComponent } from 'vue'
 import { mapState } from 'vuex'
 
+import AuthForm from 'src/components/auth_form/auth_form.js'
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import UserCard from 'src/components/user_card/user_card.vue'
-import AuthForm from 'src/components/auth_form/auth_form.js'
 
 const UserPanel = {
   computed: {
@@ -15,6 +14,7 @@ const UserPanel = {
   components: {
     PostStatusForm,
     UserCard,
+    AuthForm,
   },
 }
 
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 3f6922c31..b0479321c 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -11,7 +11,7 @@
       />
       <PostStatusForm />
     </div>
-    <auth-form
+    <AuthForm
       v-else
       key="user-panel"
     />
diff --git a/src/stores/interface.js b/src/stores/interface.js
index e76a23cc2..6e82dc5f9 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -199,7 +199,7 @@ export const useInterfaceStore = defineStore('interface', {
       console.log(this.globalError)
     },
     clearGlobalError() {
-      this.globalError = null;
+      this.globalError = null
     },
     pushGlobalNotice({
       messageKey,
diff --git a/src/sw.js b/src/sw.js
index 1e7abd3de..b7629b5f2 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -1,5 +1,6 @@
 /* eslint-env serviceworker */
 
+// biome-ignore: side effect import of assets list
 import 'virtual:pleroma-fe/service_worker_env'
 
 import { createI18n } from 'vue-i18n'

From 31f4ad343ab06ba610043b2ba3d24deb64cf4176 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 05:42:09 +0300
Subject: [PATCH 12/53] refactored the way status suspensibility works

---
 src/components/attachment/attachment.js       |   1 +
 src/components/conversation/conversation.js   |  79 +++----------
 src/components/conversation/conversation.vue  |  22 +---
 src/components/gallery/gallery.js             |  21 ++++
 src/components/gallery/gallery.vue            |   2 +
 .../post_status_form/post_status_form.js      |   8 +-
 src/components/search/search.vue              |   1 -
 src/components/status/status.js               |  46 +++-----
 src/components/status/status.vue              |  16 +--
 src/components/status_body/status_body.js     |  83 ++++++++------
 src/components/status_body/status_body.scss   |  24 ++--
 src/components/status_body/status_body.vue    |  15 ++-
 .../status_content/status_content.js          | 108 ++++++------------
 .../status_content/status_content.vue         |  12 +-
 src/components/thread_tree/thread_tree.js     |   7 +-
 src/components/thread_tree/thread_tree.vue    |  20 +---
 16 files changed, 182 insertions(+), 283 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index d5bce12a7..87d659921 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -52,6 +52,7 @@ const Attachment = {
     'shiftDn',
     'edit',
   ],
+  emits: ['play', 'pause'],
   data() {
     return {
       localDescription: this.description || this.attachment.description,
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 54bcbd373..696167831 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -55,16 +55,6 @@ const sortAndFilterConversation = (conversation, statusoid) => {
 }
 
 const conversation = {
-  data() {
-    return {
-      highlight: null,
-      expanded: false,
-      threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
-      statusContentPropertiesObject: {},
-      inlineDivePosition: null,
-      loadStatusError: null,
-    }
-  },
   props: [
     'statusId',
     'collapsable',
@@ -74,6 +64,16 @@ const conversation = {
     'profileUserId',
     'virtualHidden',
   ],
+  data() {
+    return {
+      highlight: null,
+      expanded: false,
+      threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
+      inlineDivePosition: null,
+      loadStatusError: null,
+      unsuspendibleIds: new Set(),
+    }
+  },
   created() {
     if (this.isPage) {
       this.fetchConversation()
@@ -118,16 +118,7 @@ const conversation = {
       return this.otherRepliesButtonPosition === 'inside'
     },
     suspendable() {
-      if (this.isTreeView) {
-        return Object.entries(this.statusContentProperties).every(
-          ([, prop]) => !prop.replying && prop.mediaPlaying.length === 0,
-        )
-      }
-      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
-        return this.$refs.statusComponent.every((s) => s.suspendable)
-      } else {
-        return true
-      }
+      return this.unsuspendibleIds.size > 0
     },
     hideStatus() {
       return this.virtualHidden && this.suspendable
@@ -364,31 +355,6 @@ const conversation = {
         return a
       }, {})
     },
-    statusContentProperties() {
-      return this.conversation.reduce((a, k) => {
-        const id = k.id
-        const props = (() => {
-          const def = {
-            showingTall: false,
-            expandingSubject: false,
-            showingLongSubject: false,
-            isReplying: false,
-            mediaPlaying: [],
-          }
-
-          if (this.statusContentPropertiesObject[id]) {
-            return {
-              ...def,
-              ...this.statusContentPropertiesObject[id],
-            }
-          }
-          return def
-        })()
-
-        a[id] = props
-        return a
-      }, {})
-    },
     canDive() {
       return this.isTreeView && this.isExpanded
     },
@@ -514,22 +480,6 @@ const conversation = {
     showThreadRecursively(id) {
       this.setThreadDisplayRecursively(id, 'showing')
     },
-    setStatusContentProperty(id, name, value) {
-      this.statusContentPropertiesObject = {
-        ...this.statusContentPropertiesObject,
-        [id]: {
-          ...this.statusContentPropertiesObject[id],
-          [name]: value,
-        },
-      }
-    },
-    toggleStatusContentProperty(id, name) {
-      this.setStatusContentProperty(
-        id,
-        name,
-        !this.statusContentProperties[id][name],
-      )
-    },
     leastVisibleAncestor(id) {
       let cur = id
       let parent = this.parentOf(cur)
@@ -629,6 +579,13 @@ const conversation = {
       this.undive()
       this.threadDisplayStatusObject = {}
     },
+    onStatusSuspendStateChange({ id, suspend }) {
+      if (!suspend) {
+        this.unsuspendibleIds.add(id)
+      } else {
+        this.unsuspendibleIds.delete(id)
+      }
+    },
   },
 }
 
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 8d4734083..98bd8956c 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -107,19 +107,8 @@
               :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
               :dive="() => diveIntoStatus(status.id)"
 
-              :controlled-showing-tall="statusContentProperties[status.id].showingTall"
-              :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
-              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
-              :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
-              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
-              :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
-              :controlled-replying="statusContentProperties[status.id].replying"
-              :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
-              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
-              :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
-
               @goto="setHighlight"
-              @toggle-expanded="toggleExpanded"
+              @suspendable-state-change="onStatusSuspendStateChange"
             />
             <div
               v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
@@ -150,7 +139,7 @@
             </div>
           </article>
         </div>
-        <thread-tree
+        <ThreadTree
           v-for="status in showingTopLevel"
           :key="status.id"
           ref="statusComponent"
@@ -176,10 +165,8 @@
           :show-thread-recursively="showThreadRecursively"
           :total-reply-count="totalReplyCount"
           :total-reply-depth="totalReplyDepth"
-          :status-content-properties="statusContentProperties"
-          :set-status-content-property="setStatusContentProperty"
-          :toggle-status-content-property="toggleStatusContentProperty"
           :dive="canDive ? diveIntoStatus : undefined"
+          @suspendable-state-change="onStatusSuspendStateChange"
         />
       </div>
       <div
@@ -187,7 +174,7 @@
         class="thread-body"
       >
         <article>
-          <status
+          <Status
             v-for="status in conversation"
             :key="status.id"
             ref="statusComponent"
@@ -206,6 +193,7 @@
 
             @goto="setHighlight"
             @toggle-expanded="toggleExpanded"
+            @suspendable-state-change="onStatusSuspendStateChange"
           />
         </article>
       </div>
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 252a32bf6..58ab3db0b 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -27,8 +27,10 @@ const Gallery = {
     return {
       sizes: {},
       hidingLong: true,
+      playingMedia: new Set(),
     }
   },
+  emits: ['play', 'pause'],
   components: { Attachment },
   computed: {
     rows() {
@@ -115,11 +117,21 @@ const Gallery = {
         return this.attachmentsDimensionalScore > 1
       }
     },
+    hasPlayingMedia() {
+      return this.playingMedia.size > 0
+    },
   },
   methods: {
     onNaturalSizeLoad({ id, width, height }) {
       set(this.sizes, id, { width, height })
     },
+    onMediaStateChange(playing, id) {
+      if (playing) {
+        this.playingMedia.add(id)
+      } else {
+        this.playingMedia.delete(id)
+      }
+    },
     rowStyle(row) {
       if (row.audio) {
         return { 'padding-bottom': '25%' } // fixed reduced height for audio
@@ -146,6 +158,15 @@ const Gallery = {
       useMediaViewerStore().setMedia(this.attachments)
     },
   },
+  watch: {
+    hasPlayingMedia(newValue) {
+      if (newValue) {
+        this.$emit('play')
+      } else {
+        this.$emit('pause')
+      }
+    }
+  }
 }
 
 export default Gallery
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 11637f3c2..a32d4feb7 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -34,6 +34,8 @@
             :style="itemStyle(attachment.id, row.items)"
             @set-media="onMedia"
             @natural-size-load="onNaturalSizeLoad"
+            @play="() => onMediaStateChange(true, attachment.id)"
+            @pause="() => onMediaStateChange(false, attachment.id)"
           />
         </div>
       </div>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6cb99a3b6..bb4051628 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -133,7 +133,7 @@ const PostStatusForm = {
     'resize',
     'mediaplay',
     'mediapause',
-    'can-close',
+    'close-accepted',
     'update',
   ],
   components: {
@@ -963,19 +963,19 @@ const PostStatusForm = {
     },
     requestClose() {
       if (!this.saveable) {
-        this.$emit('can-close')
+        this.$emit('close-accepted')
       } else {
         this.$refs.draftCloser.requestClose()
       }
     },
     saveAndCloseDraft() {
       this.saveDraft().then(() => {
-        this.$emit('can-close')
+        this.$emit('close-accepted')
       })
     },
     discardAndCloseDraft() {
       this.abandonDraft().then(() => {
-        this.$emit('can-close')
+        this.$emit('close-accepted')
       })
     },
     addBeforeUnloadListener() {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 4302f93f9..16418d389 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -63,7 +63,6 @@
           :compact="false"
           class="search-result"
           :statusoid="status"
-          :no-heading="false"
         />
         <button
           v-if="!loading && loaded && lastStatusFetchCount > 0"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 01d7facfc..93a92a552 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -155,31 +155,19 @@ const Status = {
 
     controlledThreadDisplayStatus: String,
     controlledToggleThreadDisplay: Function,
-    controlledShowingTall: Boolean,
-    controlledToggleShowingTall: Function,
-    controlledExpandingSubject: Boolean,
-    controlledToggleExpandingSubject: Function,
-    controlledShowingLongSubject: Boolean,
-    controlledToggleShowingLongSubject: Function,
-    controlledReplying: Boolean,
-    controlledToggleReplying: Function,
-    controlledMediaPlaying: Boolean,
-    controlledSetMediaPlaying: Function,
   },
-  emits: ['goto', 'toggleExpanded'],
+  emits: ['goto', 'toggleExpanded', 'suspendableStateChange'],
   data() {
     return {
-      uncontrolledReplying: false,
+      replying: false,
       unmuted: false,
       userExpanded: false,
-      uncontrolledMediaPlaying: [],
-      suspendable: true,
+      mediaPlaying: new Set(),
       error: null,
       headTailLinks: null,
     }
   },
   computed: {
-    ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
     showReasonMutedThread() {
       return (
         (this.status.thread_muted ||
@@ -489,7 +477,7 @@ const Status = {
       return useMergedConfigStore().mergedConfig
     },
     isSuspendable() {
-      return !this.replying && this.mediaPlaying.length === 0
+      return !this.replying && this.mediaPlaying.size === 0
     },
     inThreadForest() {
       return !!this.controlledThreadDisplayStatus
@@ -566,15 +554,17 @@ const Status = {
     clearError() {
       this.error = undefined
     },
-    toggleReplying() {
+    toggleReplyForm() {
       if (this.replying) {
+        // This emits 'close-accepted' if successful
+        // which in turn callse closeReply()
         this.$refs.postStatusForm.requestClose()
       } else {
-        this.doToggleReplying()
+        this.replying = true
       }
     },
-    doToggleReplying() {
-      controlledOrUncontrolledToggle(this, 'replying')
+    closeReplyForm() {
+      this.replying = false
     },
     gotoOriginal(id) {
       if (this.inConversation) {
@@ -598,18 +588,10 @@ const Status = {
       )
     },
     addMediaPlaying(id) {
-      controlledOrUncontrolledSet(
-        this,
-        'mediaPlaying',
-        this.mediaPlaying.concat(id),
-      )
+      this.mediaPlaying.add(id)
     },
     removeMediaPlaying(id) {
-      controlledOrUncontrolledSet(
-        this,
-        'mediaPlaying',
-        this.mediaPlaying.filter((mediaId) => mediaId !== id),
-      )
+      this.mediaPlaying.delete(id)
     },
     setHeadTailLinks(headTailLinks) {
       this.headTailLinks = headTailLinks
@@ -659,8 +641,8 @@ const Status = {
         this.$store.dispatch('fetchFavs', this.status.id)
       }
     },
-    isSuspendable: function (val) {
-      this.suspendable = val
+    isSuspendable: function (suspend) {
+      this.$emit('suspendableStateChange', { id: this.statusoid.id, suspend })
     },
   },
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5cd2de3ab..2b54977c7 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -409,15 +409,9 @@
           <StatusContent
             ref="content"
             :status="status"
-            :no-heading="noHeading"
             :highlight="highlight"
             :focused="isFocused"
-            :controlled-showing-tall="controlledShowingTall"
-            :controlled-expanding-subject="controlledExpandingSubject"
-            :controlled-showing-long-subject="controlledShowingLongSubject"
-            :controlled-toggle-showing-tall="controlledToggleShowingTall"
-            :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
-            :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
+            :in-conversation="inConversation"
             @mediaplay="addMediaPlaying($event)"
             @mediapause="removeMediaPlaying($event)"
             @parse-ready="setHeadTailLinks"
@@ -521,7 +515,7 @@
             v-if="!noHeading && !isPreview"
             :status="status"
             :replying="replying"
-            @toggle-replying="toggleReplying"
+            @toggle-replying="toggleReplyForm"
           />
         </div>
       </div>
@@ -555,9 +549,9 @@
           :replied-user="status.user"
           :copy-message-scope="status.visibility"
           :subject="replySubject"
-          @posted="doToggleReplying"
-          @draft-done="doToggleReplying"
-          @can-close="doToggleReplying"
+          @posted="closeReplyForm"
+          @draft-done="closeReplyForm"
+          @close-accepted="closeReplyForm"
         />
       </div>
     </template>
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index cdd43a024..5188f49bd 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -15,32 +15,41 @@ library.add(faFile, faMusic, faImage, faLink, faPollH)
 
 const StatusBody = {
   name: 'StatusBody',
-  props: [
-    'compact',
-    'collapse', // replaces newlines with spaces
-    'status',
-    'focused',
-    'noHeading',
-    'fullContent',
-    'singleLine',
-    'showingTall',
-    'expandingSubject',
-    'showingLongSubject',
-    'toggleShowingTall',
-    'toggleExpandingSubject',
-    'toggleShowingLongSubject',
-  ],
+  props: {
+    status: {
+      // Main thing
+      type: Object,
+      required: true,
+    },
+    compact: {
+      // Resizes emoji and minimizes vertical space used
+      // Primarily used for showing status in react notifications
+      type: Boolean,
+      default: false,
+    },
+    collapse: {
+      // replaces newlines with spaces
+      type: Boolean,
+      default: false,
+    },
+    singleLine: {
+      // Show entire thing (subject and content) in a single line
+      // Primarily used in chats
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       postLength: this.status.text.length,
       parseReadyDone: false,
+      showingTall: false,
+      showingLongSubject: false,
+      expandingSubject: null,
     }
   },
   emits: ['parseReady'],
   computed: {
-    localCollapseSubjectDefault() {
-      return this.mergedConfig.collapseMessageWithSubject
-    },
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
@@ -51,32 +60,31 @@ const StatusBody = {
     //
     // Using max-height + overflow: auto for status components resulted in false positives
     // very often with japanese characters, and it was very annoying.
-    tallStatus() {
+    hasLongSubject() {
+      return this.status.summary.length > 240
+    },
+    hasSubject() {
+      return !!this.status.summary
+    },
+    // When a status has a subject and is also tall, we should only have one show more/less
+    // button. If the default is to collapse statuses with subjects, we just treat it like
+    // a status with a subject; otherwise, we just treat it like a tall status.
+    mightHideBecauseSubject() {
+      return this.hasSubject && this.mergedConfig.collapseMessageWithSubject
+    },
+    mightHideBecauseTall() {
       if (this.singleLine || this.compact) return false
       const lengthScore =
         this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
       return lengthScore > 20
     },
-    longSubject() {
-      return this.status.summary.length > 240
-    },
-    // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
-    mightHideBecauseSubject() {
-      return !!this.status.summary && this.localCollapseSubjectDefault
-    },
-    mightHideBecauseTall() {
-      return (
-        this.tallStatus &&
-        !(this.status.summary && this.localCollapseSubjectDefault)
-      )
-    },
     hideSubjectStatus() {
       return this.mightHideBecauseSubject && !this.expandingSubject
     },
     hideTallStatus() {
       return this.mightHideBecauseTall && !this.showingTall
     },
-    shouldShowToggle() {
+    shouldShowExpandToggle() {
       return this.mightHideBecauseSubject || this.mightHideBecauseTall
     },
     toggleButtonClasses() {
@@ -97,6 +105,11 @@ const StatusBody = {
           : this.$t('general.show_more')
       }
     },
+    shouldHide() {
+      return (
+        !this.showingMore && this.mightHideBecauseSubject && this.hasSubject
+      )
+    },
     showingMore() {
       return (
         (this.mightHideBecauseTall && this.showingTall) ||
@@ -147,9 +160,9 @@ const StatusBody = {
     },
     toggleShowMore() {
       if (this.mightHideBecauseTall) {
-        this.toggleShowingTall()
+        this.showingTall = !this.showingTall
       } else if (this.mightHideBecauseSubject) {
-        this.toggleExpandingSubject()
+        this.expandingSubject = !this.expandingSubject
       }
     },
     generateTagLink(tag) {
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index ff35bde58..9954663e7 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -53,6 +53,7 @@
   }
 
   .text-wrapper {
+    position: relative;
     text-overflow: ellipsis;
     overflow-wrap: break-word;
     overflow: hidden;
@@ -60,10 +61,12 @@
     flex-flow: column nowrap;
 
     &.-tall-status {
-      position: relative;
-      height: 16em;
       z-index: 1;
 
+      &:not(.-hidden) {
+        height: 16em;
+      }
+
       .media-body {
         min-height: 0;
         mask:
@@ -98,6 +101,7 @@
     text-wrap: pretty;
     width: 100%;
     text-align: center;
+    margin: 0.1em 0;
   }
 
   .status-unhider {
@@ -107,17 +111,17 @@
     padding-bottom: 1em;
   }
 
-  .tall-status-hider {
-    position: absolute;
-    height: 5em;
-    margin-top: 10em;
-    line-height: 8em;
-    z-index: 2;
-  }
-
   .tall-subject-hider {
     // position: absolute;
     padding-bottom: 0.5em;
+
+    &:not(.cw-status-hider) {
+      position: absolute;
+      margin-top: 10em;
+      height: 5em;
+      line-height: 8em;
+      z-index: 2;
+    }
   }
 
   & .status-unhider,
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index f724f2413..b611d69b8 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -5,9 +5,9 @@
   >
     <div class="body">
       <div
-        v-if="status.summary_raw_html"
+        v-if="hasSubject"
         class="summary-wrapper"
-        :class="{ '-tall': (longSubject && !showingLongSubject) }"
+        :class="{ '-tall': (hasLongSubject && !showingLongSubject) }"
       >
         <RichContent
           class="media-body summary"
@@ -18,14 +18,14 @@
           :allow-non-square-emoji="allowNonSquareEmoji"
         />
         <button
-          v-show="longSubject && showingLongSubject"
+          v-show="hasLongSubject && showingLongSubject"
           class="button-unstyled -link tall-subject-hider"
           @click.prevent="toggleShowingLongSubject"
         >
           {{ $t("status.hide_full_subject") }}
         </button>
         <button
-          v-show="longSubject && !showingLongSubject"
+          v-show="hasLongSubject && !showingLongSubject"
           class="button-unstyled -link tall-subject-hider"
           @click.prevent="toggleShowingLongSubject"
         >
@@ -34,10 +34,10 @@
       </div>
       <div
         class="text-wrapper"
-        :class="{'-tall-status': hideTallStatus, '-expanded': showingMore}"
+        :class="{'-tall-status': hideTallStatus, '-hidden': shouldHide, '-expanded': showingMore}"
       >
         <RichContent
-          v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
+          v-if="!(singleLine && hasSubject) && !shouldHide"
           :class="{ '-single-line': singleLine }"
           class="text media-body"
           :html="status.raw_html"
@@ -52,12 +52,11 @@
           @parse-ready="onParseReady"
         />
         <div
-          v-show="shouldShowToggle"
+          v-show="shouldShowExpandToggle"
           :class="toggleButtonClasses"
         >
           <button
             class="btn button-default toggle-button"
-            :class="{ '-focused': focused }"
             :aria-expanded="showingMore"
             @click.prevent="toggleShowMore"
           >
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 2186498ef..1cd3fc7b4 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -22,69 +22,40 @@ import {
 
 library.add(faCircleNotch, faFile, faMusic, faImage, faLink, faPollH)
 
-const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
-
-const controlledOrUncontrolledGetters = (list) =>
-  list.reduce((res, name) => {
-    const camelized = camelCase(name)
-    const toggle = `controlledToggle${camelized}`
-    const controlledName = `controlled${camelized}`
-    const uncontrolledName = `uncontrolled${camelized}`
-    res[name] = function () {
-      return (this.$data[toggle] !== undefined ||
-        this.$props[toggle] !== undefined) &&
-        this[toggle]
-        ? this[controlledName]
-        : this[uncontrolledName]
-    }
-    return res
-  }, {})
-
-const controlledOrUncontrolledToggle = (obj, name) => {
-  const camelized = camelCase(name)
-  const toggle = `controlledToggle${camelized}`
-  const uncontrolledName = `uncontrolled${camelized}`
-  if (obj[toggle]) {
-    obj[toggle]()
-  } else {
-    obj[uncontrolledName] = !obj[uncontrolledName]
-  }
-}
-
 const StatusContent = {
   name: 'StatusContent',
-  props: [
-    'status',
-    'compact',
-    'collapse',
-    'focused',
-    'noHeading',
-    'fullContent',
-    'singleLine',
-    'controlledShowingTall',
-    'controlledExpandingSubject',
-    'controlledToggleShowingTall',
-    'controlledToggleExpandingSubject',
-    'controlledShowingLongSubject',
-    'controlledToggleShowingLongSubject',
-  ],
-  emits: ['parseReady', 'mediaplay', 'mediapause'],
-  data() {
-    return {
-      uncontrolledShowingTall:
-        this.fullContent || (this.inConversation && this.focused),
-      uncontrolledShowingLongSubject: false,
-      // not as computed because it sets the initial state which will be changed later
-      uncontrolledExpandingSubject:
-        !useMergedConfigStore().mergedConfig.collapseMessageWithSubject,
-    }
+  props: {
+    status: {
+      // Main thing
+      type: Object,
+      required: true,
+    },
+    compact: {
+      // Resizes emoji and minimizes vertical space used
+      // Primarily used for showing status in react notifications
+      type: Boolean,
+      default: false,
+    },
+    collapse: {
+      // replaces newlines with spaces
+      type: Boolean,
+      default: false,
+    },
+    singleLine: {
+      // Show entire thing (subject and content) in a single line
+      // Primarily used in chats
+      type: Boolean,
+      default: false,
+    },
+    inConversation: {
+      // Whether status content is being shown in an (open) conversation
+      // Used to control whether to display attachments or not
+      type: Boolean,
+      default: false,
+    },
   },
+  emits: ['parseReady', 'mediaplay', 'mediapause'],
   computed: {
-    ...controlledOrUncontrolledGetters([
-      'showingTall',
-      'expandingSubject',
-      'showingLongSubject',
-    ]),
     statusCard() {
       if (!this.status.card) return null
       return this.status.card.url === this.status.quote_url
@@ -93,22 +64,20 @@ const StatusContent = {
     },
     hideAttachments() {
       return (
-        (this.mergedConfig.hideAttachments && !this.inConversation) ||
-        (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
+        !this.fullContent &&
+        ((this.mergedConfig.hideAttachments && !this.inConversation) ||
+          (this.mergedConfig.hideAttachmentsInConv && this.inConversation))
       )
     },
     nsfwClickthrough() {
       if (!this.status.nsfw) {
         return false
       }
-      if (this.status.summary && this.localCollapseSubjectDefault) {
+      if (this.status.summary && this.mergedConfig.collapseMessageWithSubject) {
         return false
       }
       return true
     },
-    localCollapseSubjectDefault() {
-      return this.mergedConfig.collapseMessageWithSubject
-    },
     attachmentSize() {
       if (this.compact) {
         return 'small'
@@ -137,15 +106,6 @@ const StatusContent = {
     StatusBody,
   },
   methods: {
-    toggleShowingTall() {
-      controlledOrUncontrolledToggle(this, 'showingTall')
-    },
-    toggleExpandingSubject() {
-      controlledOrUncontrolledToggle(this, 'expandingSubject')
-    },
-    toggleShowingLongSubject() {
-      controlledOrUncontrolledToggle(this, 'showingLongSubject')
-    },
     setMedia() {
       const attachments =
         this.attachmentSize === 'hide'
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 6dc80b8a5..973290872 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -8,12 +8,6 @@
       :status="status"
       :compact="compact"
       :single-line="singleLine"
-      :showing-tall="showingTall"
-      :expanding-subject="expandingSubject"
-      :showing-long-subject="showingLongSubject"
-      :toggle-showing-tall="toggleShowingTall"
-      :toggle-expanding-subject="toggleExpandingSubject"
-      :toggle-showing-long-subject="toggleShowingLongSubject"
       :collapse="collapse"
       @parse-ready="$emit('parseReady', $event)"
     >
@@ -42,12 +36,12 @@
         :attachments="status.attachments"
         :limit="compact ? 1 : 0"
         :size="attachmentSize"
-        @play="$emit('mediaplay', attachment.id)"
-        @pause="$emit('mediapause', attachment.id)"
+        @play="$emit('mediaplay')"
+        @pause="$emit('mediapause')"
       />
 
       <div
-        v-if="statusCard && !noHeading && !compact"
+        v-if="statusCard && !compact"
         class="link-preview media-body"
       >
         <link-preview
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index ad0c0039b..bbb81b059 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -32,11 +32,9 @@ const ThreadTree = {
     showThreadRecursively: Function,
     totalReplyCount: Object,
     totalReplyDepth: Object,
-    statusContentProperties: Object,
-    setStatusContentProperty: Function,
-    toggleStatusContentProperty: Function,
     dive: Function,
   },
+  emits: ['suspendableStateChange'],
   computed: {
     suspendable() {
       const selfSuspendable = this.$refs.statusComponent
@@ -69,9 +67,6 @@ const ThreadTree = {
     threadShowing() {
       return this.threadDisplayStatus[this.status.id] === 'showing'
     },
-    currentProp() {
-      return this.statusContentProperties[this.status.id]
-    },
   },
   methods: {
     statusById(id) {
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 4ffe463fe..f04315877 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -1,6 +1,6 @@
 <template>
   <article class="thread-tree">
-    <status
+    <Status
       :key="status.id"
       ref="statusComponent"
       :inline-expanded="collapsable && isExpanded"
@@ -19,26 +19,17 @@
       :controlled-thread-display-status="threadDisplayStatus[status.id]"
       :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
 
-      :controlled-showing-tall="currentProp.showingTall"
-      :controlled-expanding-subject="currentProp.expandingSubject"
-      :controlled-showing-long-subject="currentProp.showingLongSubject"
-      :controlled-replying="currentProp.replying"
-      :controlled-media-playing="currentProp.mediaPlaying"
-      :controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
-      :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
-      :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
-      :controlled-toggle-replying="() => toggleCurrentProp('replying')"
-      :controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
       :dive="dive ? () => dive(status.id) : undefined"
 
       @goto="setHighlight"
       @toggle-expanded="toggleExpanded"
+      @suspendable-state-change="e => $emit('suspendableStateChange', e)"
     />
     <div
       v-if="currentReplies.length && threadShowing"
       class="thread-tree-replies"
     >
-      <thread-tree
+      <ThreadTree
         v-for="replyStatus in currentReplies"
         :key="replyStatus.id"
         ref="childComponent"
@@ -64,10 +55,9 @@
         :show-thread-recursively="showThreadRecursively"
         :total-reply-count="totalReplyCount"
         :total-reply-depth="totalReplyDepth"
-        :status-content-properties="statusContentProperties"
-        :set-status-content-property="setStatusContentProperty"
-        :toggle-status-content-property="toggleStatusContentProperty"
         :dive="dive"
+
+        @suspendable-state-change="e => $emit('suspendableStateChange', e)"
       />
     </div>
     <div

From 415844e3da1a42595a51434697d8fa873cc5475f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 06:00:41 +0300
Subject: [PATCH 13/53] diving deeper into refactoring threads

---
 src/components/conversation/conversation.vue |  8 +--
 src/components/gallery/gallery.js            |  4 +-
 src/components/status/status.js              | 55 ++++----------------
 src/components/status/status.vue             |  6 +--
 src/components/thread_tree/thread_tree.js    | 33 +-----------
 src/components/thread_tree/thread_tree.vue   | 19 ++++---
 6 files changed, 32 insertions(+), 93 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 98bd8956c..36ab7e0b4 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -105,9 +105,10 @@
               :profile-user-id="profileUserId"
               :simple-tree="treeViewIsSimple"
               :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
-              :dive="() => diveIntoStatus(status.id)"
+              can-dive
 
               @goto="setHighlight"
+              @dive="() => diveIntoStatus(status.id)"
               @suspendable-state-change="onStatusSuspendStateChange"
             />
             <div
@@ -160,12 +161,13 @@
           :toggle-expanded="toggleExpanded"
 
           :simple="treeViewIsSimple"
-          :toggle-thread-display="toggleThreadDisplay"
           :thread-display-status="threadDisplayStatus"
           :show-thread-recursively="showThreadRecursively"
           :total-reply-count="totalReplyCount"
           :total-reply-depth="totalReplyDepth"
-          :dive="canDive ? diveIntoStatus : undefined"
+
+          :can-dive="canDive"
+          @dive="diveIntoStatus"
           @suspendable-state-change="onStatusSuspendStateChange"
         />
       </div>
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 58ab3db0b..c244a8cb3 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -165,8 +165,8 @@ const Gallery = {
       } else {
         this.$emit('pause')
       }
-    }
-  }
+    },
+  },
 }
 
 export default Gallery
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 93a92a552..ecbca4c94 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -75,44 +75,6 @@ library.add(
 
 const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
 
-const controlledOrUncontrolledGetters = (list) =>
-  list.reduce((res, name) => {
-    const camelized = camelCase(name)
-    const toggle = `controlledToggle${camelized}`
-    const controlledName = `controlled${camelized}`
-    const uncontrolledName = `uncontrolled${camelized}`
-    res[name] = function () {
-      return (this.$data[toggle] !== undefined ||
-        this.$props[toggle] !== undefined) &&
-        this[toggle]
-        ? this[controlledName]
-        : this[uncontrolledName]
-    }
-    return res
-  }, {})
-
-const controlledOrUncontrolledToggle = (obj, name) => {
-  const camelized = camelCase(name)
-  const toggle = `controlledToggle${camelized}`
-  const uncontrolledName = `uncontrolled${camelized}`
-  if (obj[toggle]) {
-    obj[toggle]()
-  } else {
-    obj[uncontrolledName] = !obj[uncontrolledName]
-  }
-}
-
-const controlledOrUncontrolledSet = (obj, name, val) => {
-  const camelized = camelCase(name)
-  const set = `controlledSet${camelized}`
-  const uncontrolledName = `uncontrolled${camelized}`
-  if (obj[set]) {
-    obj[set](val)
-  } else {
-    obj[uncontrolledName] = val
-  }
-}
-
 const Status = {
   name: 'Status',
   components: {
@@ -146,17 +108,22 @@ const Status = {
     inProfile: Boolean,
     inConversation: Boolean,
     inQuote: Boolean,
+    canDive: Boolean,
 
     profileUserId: String,
     simpleTree: Boolean,
     showOtherRepliesAsButton: Boolean,
-    dive: Function,
+    canDive: Boolean,
     ignoreMute: Boolean,
 
-    controlledThreadDisplayStatus: String,
-    controlledToggleThreadDisplay: Function,
+    threadDisplayStatus: String,
   },
-  emits: ['goto', 'toggleExpanded', 'suspendableStateChange'],
+  emits: [
+    'goto',
+    'dive',
+    'toggleExpanded',
+    'suspendableStateChange'
+  ],
   data() {
     return {
       replying: false,
@@ -480,10 +447,10 @@ const Status = {
       return !this.replying && this.mediaPlaying.size === 0
     },
     inThreadForest() {
-      return !!this.controlledThreadDisplayStatus
+      return !!this.threadDisplayStatus
     },
     threadShowing() {
-      return this.controlledThreadDisplayStatus === 'showing'
+      return this.threadDisplayStatus === 'showing'
     },
     visibilityLocalized() {
       return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 2b54977c7..f301ad890 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -236,10 +236,10 @@
                   />
                 </button>
                 <button
-                  v-if="dive && !simpleTree"
+                  v-if="canDive && !simpleTree"
                   class="button-unstyled"
                   :title="$t('status.show_only_conversation_under_this')"
-                  @click.prevent="dive"
+                  @click.prevent="$emit('dive')"
                 >
                   <FAIcon
                     fixed-width
@@ -432,7 +432,7 @@
               v-if="showOtherRepliesAsButton && replies.length > 1"
               class="button-unstyled -link"
               :title="$t('status.ancestor_follow', { numReplies: replies.length - 1 }, replies.length - 1)"
-              @click.prevent="dive"
+              @click.prevent="$emit('dive')"
             >
               {{ $t('status.replies_list_with_others', { numReplies: replies.length - 1 }, replies.length - 1) }}
             </button>
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index bbb81b059..14e79e188 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -26,28 +26,14 @@ const ThreadTree = {
     toggleExpanded: Function,
 
     simple: Boolean,
-    // to control display of the whole thread forest
-    toggleThreadDisplay: Function,
+    canDive: Boolean,
     threadDisplayStatus: Object,
     showThreadRecursively: Function,
     totalReplyCount: Object,
     totalReplyDepth: Object,
-    dive: Function,
   },
-  emits: ['suspendableStateChange'],
+  emits: ['suspendableStateChange', 'dive'],
   computed: {
-    suspendable() {
-      const selfSuspendable = this.$refs.statusComponent
-        ? this.$refs.statusComponent.suspendable
-        : true
-      if (this.$refs.childComponent) {
-        return (
-          selfSuspendable &&
-          this.$refs.childComponent.every((s) => s.suspendable)
-        )
-      }
-      return selfSuspendable
-    },
     reverseLookupTable() {
       return this.conversation.reduce(
         (table, status, index) => {
@@ -72,21 +58,6 @@ const ThreadTree = {
     statusById(id) {
       return this.conversation[this.reverseLookupTable[id]]
     },
-    collapseThread() {
-      /* no-op */
-    },
-    showThread() {
-      /* no-op */
-    },
-    showAllSubthreads() {
-      /* no-op */
-    },
-    toggleCurrentProp(name) {
-      this.toggleStatusContentProperty(this.status.id, name)
-    },
-    setCurrentProp(name) {
-      this.setStatusContentProperty(this.status.id, name)
-    },
   },
 }
 
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index f04315877..ee0aa75fb 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -3,30 +3,29 @@
     <Status
       :key="status.id"
       ref="statusComponent"
-      :inline-expanded="collapsable && isExpanded"
       :statusoid="status"
+      :replies="getReplies(status.id)"
+      :inline-expanded="collapsable && isExpanded"
       :expandable="!isExpanded"
       :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
       :focused="isFocusedFunction(status.id)"
       :in-conversation="isExpanded"
       :highlight="highlight"
-      :replies="getReplies(status.id)"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
       class="conversation-status conversation-status-treeview status-fadein panel-body"
 
       :simple-tree="simple"
-      :controlled-thread-display-status="threadDisplayStatus[status.id]"
-      :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
-
-      :dive="dive ? () => dive(status.id) : undefined"
+      :thread-display-status="threadDisplayStatus[status.id]"
 
+      :can-dive="canDive"
+      @dive="$emit('dive', status.id)"
       @goto="setHighlight"
       @toggle-expanded="toggleExpanded"
       @suspendable-state-change="e => $emit('suspendableStateChange', e)"
     />
     <div
-      v-if="currentReplies.length && threadShowing"
+      v-if="currentReplies.length > 0 && threadShowing"
       class="thread-tree-replies"
     >
       <ThreadTree
@@ -50,13 +49,13 @@
         :toggle-expanded="toggleExpanded"
 
         :simple="simple"
-        :toggle-thread-display="toggleThreadDisplay"
         :thread-display-status="threadDisplayStatus"
         :show-thread-recursively="showThreadRecursively"
         :total-reply-count="totalReplyCount"
         :total-reply-depth="totalReplyDepth"
-        :dive="dive"
 
+        :can-dive="canDive"
+        @dive="(e) => $emit('dive', e)"
         @suspendable-state-change="e => $emit('suspendableStateChange', e)"
       />
     </div>
@@ -70,7 +69,7 @@
         tag="button"
         keypath="status.thread_follow_with_icon"
         class="button-unstyled -link thread-tree-show-replies-button"
-        @click.prevent="dive(status.id)"
+        @click.prevent="$emit('dive', status.id)"
       >
         <template #icon>
           <FAIcon

From 06fdcb8dd352dd0f3eb7e57a66f9761e99f2790d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 06:01:34 +0300
Subject: [PATCH 14/53] missing emit

---
 src/components/attachment/attachment.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 87d659921..f7d6ebf10 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -52,7 +52,7 @@ const Attachment = {
     'shiftDn',
     'edit',
   ],
-  emits: ['play', 'pause'],
+  emits: ['play', 'pause', 'naturalSizeLoad'],
   data() {
     return {
       localDescription: this.description || this.attachment.description,

From 43857fd3eb3b72979b8266f022fa674878b90348 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 06:17:17 +0300
Subject: [PATCH 15/53] fix warnings and better handing of highlight/goto

---
 src/components/conversation/conversation.vue     | 10 +++++-----
 src/components/status_body/status_body.js        |  8 +++++++-
 src/components/status_content/status_content.vue |  1 +
 src/components/thread_tree/thread_tree.js        |  2 +-
 src/components/thread_tree/thread_tree.vue       |  7 ++++---
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 36ab7e0b4..8a46722ad 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -97,7 +97,7 @@
 
               :expandable="!isExpanded"
               :focused="isFocused(status.id)"
-              :highlight="getHighlight()"
+              :highlight="maybeHighlight"
               :inline-expanded="collapsable && isExpanded"
               :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
               :in-profile="inProfile"
@@ -156,8 +156,7 @@
 
           :is-focused-function="isFocused"
           :get-replies="getReplies"
-          :highlight="maybeHighlight"
-          :set-highlight="setHighlight"
+          :highlight="maybeHighlight === status.id"
           :toggle-expanded="toggleExpanded"
 
           :simple="treeViewIsSimple"
@@ -165,8 +164,9 @@
           :show-thread-recursively="showThreadRecursively"
           :total-reply-count="totalReplyCount"
           :total-reply-depth="totalReplyDepth"
-
           :can-dive="canDive"
+
+          @goto="setHighlight"
           @dive="diveIntoStatus"
           @suspendable-state-change="onStatusSuspendStateChange"
         />
@@ -186,7 +186,7 @@
 
             :expandable="!isExpanded"
             :focused="isFocused(status.id)"
-            :highlight="getHighlight()"
+            :highlight="maybeHighlight === status.id"
             :inline-expanded="collapsable && isExpanded"
             :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
             :in-profile="inProfile"
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 5188f49bd..2da6da555 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -38,6 +38,12 @@ const StatusBody = {
       type: Boolean,
       default: false,
     },
+    inConversation: {
+      // Is status rendered within open conversation?
+      // Used to automatically expand subjects (if collapsed)
+      type: Boolean,
+      default: false,
+    }
   },
   data() {
     return {
@@ -70,7 +76,7 @@ const StatusBody = {
     // button. If the default is to collapse statuses with subjects, we just treat it like
     // a status with a subject; otherwise, we just treat it like a tall status.
     mightHideBecauseSubject() {
-      return this.hasSubject && this.mergedConfig.collapseMessageWithSubject
+      return !this.inConversation && this.hasSubject && this.mergedConfig.collapseMessageWithSubject
     },
     mightHideBecauseTall() {
       if (this.singleLine || this.compact) return false
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 973290872..6b46bd768 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -9,6 +9,7 @@
       :compact="compact"
       :single-line="singleLine"
       :collapse="collapse"
+      :in-conversation="inConversation"
       @parse-ready="$emit('parseReady', $event)"
     >
       <div v-if="status.poll && status.poll.options && !compact">
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 14e79e188..7631d127f 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -32,7 +32,7 @@ const ThreadTree = {
     totalReplyCount: Object,
     totalReplyDepth: Object,
   },
-  emits: ['suspendableStateChange', 'dive'],
+  emits: ['suspendableStateChange', 'goto', 'dive'],
   computed: {
     reverseLookupTable() {
       return this.conversation.reduce(
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index ee0aa75fb..72f8512e5 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -10,17 +10,17 @@
       :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
       :focused="isFocusedFunction(status.id)"
       :in-conversation="isExpanded"
-      :highlight="highlight"
+      :highlight="highlight === status.id"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
       class="conversation-status conversation-status-treeview status-fadein panel-body"
 
       :simple-tree="simple"
       :thread-display-status="threadDisplayStatus[status.id]"
-
       :can-dive="canDive"
+
       @dive="$emit('dive', status.id)"
-      @goto="setHighlight"
+      @goto="$emit('goto', status.id)"
       @toggle-expanded="toggleExpanded"
       @suspendable-state-change="e => $emit('suspendableStateChange', e)"
     />
@@ -55,6 +55,7 @@
         :total-reply-depth="totalReplyDepth"
 
         :can-dive="canDive"
+        @goto="(e) => $emit('goto', e)"
         @dive="(e) => $emit('dive', e)"
         @suspendable-state-change="e => $emit('suspendableStateChange', e)"
       />

From ed56e644fb36b9a8f4949b2e393f02d07382a163 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 06:18:15 +0300
Subject: [PATCH 16/53] fix peek/minimize string

---
 src/components/settings_modal/settings_modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index d5d0a93d9..22b1595f3 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -22,7 +22,7 @@
         </transition>
         <button
           class="btn button-default"
-          :title="$t('general.minimize')"
+          :title="$t('general.peek')"
           @click="toggleMinimizeModal"
         >
           <FAIcon

From 8a116aa9786f7ec71e3a6492a26561461208d4cc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 06:20:18 +0300
Subject: [PATCH 17/53] fix scrollable-tabs warnings

---
 src/components/lists_edit/lists_edit.vue                       | 2 +-
 src/components/settings_modal/settings_modal_admin_content.vue | 2 +-
 src/components/settings_modal/settings_modal_user_content.vue  | 2 +-
 src/components/settings_modal/tabs/mutes_and_blocks_tab.vue    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index 713a40673..25b818deb 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/src/components/lists_edit/lists_edit.vue
@@ -50,7 +50,7 @@
       </div>
       <tab-switcher
         class="list-member-management"
-        :scrollable-tabs
+        scrollable-tabs
       >
         <div
           v-if="id || addedUserIds.size > 0"
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index 911c0df4a..7725986fd 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -4,7 +4,7 @@
     ref="tabSwitcher"
     class="settings-admin-content settings_tab-switcher"
     :side-tab-bar="true"
-    :scrollable-tabs
+    scrollable-tabs
     :render-only-focused="true"
     :body-scroll-lock="bodyLock"
   >
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index 86d734e4e..c958b9435 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -2,7 +2,7 @@
   <vertical-tab-switcher
     ref="tabSwitcher"
     class="settings_tab-switcher"
-    :scrollable-tabs
+    scrollable-tabs
     :body-scroll-lock="bodyLock"
     :hide-header="navHideHeader"
   >
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 5b8066ef7..f89253133 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -1,7 +1,7 @@
 <template>
   <tab-switcher
     class="mutes-and-blocks-tab"
-    :scrollable-tabs
+    scrollable-tabs
   >
     <div
       class="blocks"

From c94c54f4c8e241e153c4681f445d5ee5c09a0e5b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 06:24:11 +0300
Subject: [PATCH 18/53] :)

---
 src/boot/after_store.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index bc86cb1e4..d24684865 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -468,7 +468,7 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   app.use(pinia)
 
   app.config.errorHandler = (error, instance, info) => {
-    console.error('GLOBAL ERROR HANDLER', error, instance, info)
+    console.error('Global Vue Error Handler caught an error:', error, instance, info)
     useInterfaceStore().setGlobalError({ error, instance, info })
   }
 

From 436db2a9d8383d679eb6fc8c54583f140655ad38 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 06:35:02 +0300
Subject: [PATCH 19/53] fix nsfw state

---
 src/components/draft/draft.js                    | 9 ---------
 src/components/status_content/status_content.js  | 9 ---------
 src/components/status_content/status_content.vue | 6 +++---
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index 529d3ddf1..fac5790aa 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -69,15 +69,6 @@ const Draft = {
     localCollapseSubjectDefault() {
       return useMergedConfigStore().mergedConfig.collapseMessageWithSubject
     },
-    nsfwClickthrough() {
-      if (!this.draft.nsfw) {
-        return false
-      }
-      if (this.draft.summary && this.localCollapseSubjectDefault) {
-        return false
-      }
-      return true
-    },
   },
   watch: {
     editing(newVal) {
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 1cd3fc7b4..209abee99 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -69,15 +69,6 @@ const StatusContent = {
           (this.mergedConfig.hideAttachmentsInConv && this.inConversation))
       )
     },
-    nsfwClickthrough() {
-      if (!this.status.nsfw) {
-        return false
-      }
-      if (this.status.summary && this.mergedConfig.collapseMessageWithSubject) {
-        return false
-      }
-      return true
-    },
     attachmentSize() {
       if (this.compact) {
         return 'small'
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 6b46bd768..5ad4fede1 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -33,7 +33,7 @@
         v-if="status.attachments.length !== 0"
         class="attachments media-body"
         :compact="compact"
-        :nsfw="nsfwClickthrough"
+        :nsfw="status.nsfw"
         :attachments="status.attachments"
         :limit="compact ? 1 : 0"
         :size="attachmentSize"
@@ -45,10 +45,10 @@
         v-if="statusCard && !compact"
         class="link-preview media-body"
       >
-        <link-preview
+        <LinkPreview
           :card="status.card"
           :size="attachmentSize"
-          :nsfw="nsfwClickthrough"
+          :nsfw="status.nsfw"
         />
       </div>
     </StatusBody>

From 4b3ad72b31a6ab6335a5a6f9d0d80dc70c8ce8f8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 06:54:51 +0300
Subject: [PATCH 20/53] use promisedRequest for theme resource fetching

---
 src/api/helpers.js                        |  5 ++++
 src/services/style_setter/style_setter.js | 31 ++++++++++++-----------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/api/helpers.js b/src/api/helpers.js
index 40b879232..f965750c5 100644
--- a/src/api/helpers.js
+++ b/src/api/helpers.js
@@ -71,6 +71,7 @@ export const promisedRequest = async ({
   url,
   payload,
   formData,
+  cache,
   credentials,
   headers = {},
 }) => {
@@ -87,6 +88,10 @@ export const promisedRequest = async ({
     options.headers['Content-Type'] = 'application/json'
   }
 
+  if (cache) {
+    options.cache = cache
+  }
+
   if (formData || payload) {
     options.body = formData || JSON.stringify(payload)
   }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 2a695f4db..dfb52f50d 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -2,6 +2,8 @@ import sum from 'hash-sum'
 import localforage from 'localforage'
 import { chunk, throttle } from 'lodash'
 
+import { promisedRequest } from 'src/api/helpers.js'
+
 import { getCssRules } from '../theme_data/css_utils.js'
 import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js'
 
@@ -300,7 +302,7 @@ export const applyStyleConfig = (input) => {
   adoptStyleSheets()
 }
 
-export const getResourcesIndex = async (url, parser = JSON.parse) => {
+export const getResourcesIndex = async (url, parser = x => x) => {
   const cache = 'no-store'
   const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
   let builtin
@@ -314,14 +316,15 @@ export const getResourcesIndex = async (url, parser = JSON.parse) => {
         return [
           k,
           () =>
-            window
-              .fetch(v, { cache })
-              .then((data) => data.text())
-              .then((text) => parser(text))
-              .catch((e) => {
-                console.error(e)
-                return null
-              }),
+            promisedRequest({
+              url: v,
+              cache,
+            })
+            .then(({ data: text }) => parser(text))
+            .catch((e) => {
+              console.error(e)
+              return null
+            }),
         ]
       } else {
         console.error(`Unknown resource format - ${k} is a ${typeof v}`)
@@ -331,18 +334,16 @@ export const getResourcesIndex = async (url, parser = JSON.parse) => {
   }
 
   try {
-    const builtinData = await window.fetch(url, { cache })
-    const builtinResources = await builtinData.json()
-    builtin = resourceTransform(builtinResources)
+    const { data: builtinData } = await promisedRequest({ url, cache })
+    builtin = resourceTransform(builtinData)
   } catch {
     builtin = []
     console.warn(`Builtin resources at ${url} unavailable`)
   }
 
   try {
-    const customData = await window.fetch(customUrl, { cache })
-    const customResources = await customData.json()
-    custom = resourceTransform(customResources)
+    const { data: customData } = await promisedRequest({ url: customUrl, cache })
+    custom = resourceTransform(customData)
   } catch {
     custom = []
     console.warn(`Custom resources at ${customUrl} unavailable`)

From b817b97d1a7fd3a96ff958a7674af3f0f3921452 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 07:15:21 +0300
Subject: [PATCH 21/53] maybe/get

---
 src/components/conversation/conversation.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 696167831..a894348af 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -358,9 +358,6 @@ const conversation = {
     canDive() {
       return this.isTreeView && this.isExpanded
     },
-    maybeHighlight() {
-      return this.isExpanded ? this.highlight : null
-    },
     ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
     ...mapState({
       mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
@@ -435,7 +432,7 @@ const conversation = {
     getReplies(id) {
       return this.replies[id] || []
     },
-    getHighlight() {
+    maybeHighlight() {
       return this.isExpanded ? this.highlight : null
     },
     setHighlight(id) {

From afce78a59794f5ed29faba60826bec9537776d30 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 14:10:13 +0300
Subject: [PATCH 22/53] fix vaartis error for realsies this time

---
 src/modules/statuses.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 5bc852be1..6b71fa5e9 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -883,9 +883,11 @@ const statuses = {
           'addNewUsers',
           data.statuses.map((s) => s.user).filter((u) => u),
         )
-        data.statuses = store.dispatch('addNewStatuses', {
+        store.commit('addNewStatuses', {
           statuses: data.statuses,
         })
+
+        data.statuses = data.statuses.map((s) => store.state.allStatusesObject[s.id])
         return data
       })
     },

From cf53cc4e6be587471e9131af1bd1ced93acb744f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 14:26:24 +0300
Subject: [PATCH 23/53] documentation

---
 .../conversation-page/conversation-page.vue   |  5 +-
 src/components/conversation/conversation.js   | 49 +++++++++++++++----
 src/components/search/search.vue              |  1 -
 src/components/timeline/timeline.vue          |  8 +--
 4 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue
index 8cc0a55fe..df5dd4bbd 100644
--- a/src/components/conversation-page/conversation-page.vue
+++ b/src/components/conversation-page/conversation-page.vue
@@ -1,8 +1,7 @@
 <template>
-  <conversation
-    :collapsable="false"
-    is-page="true"
+  <Conversation
     :status-id="statusId"
+    is-page
   />
 </template>
 
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index a894348af..1bc9f3858 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -55,15 +55,46 @@ const sortAndFilterConversation = (conversation, statusoid) => {
 }
 
 const conversation = {
-  props: [
-    'statusId',
-    'collapsable',
-    'isPage',
-    'pinnedStatusIdsObject',
-    'inProfile',
-    'profileUserId',
-    'virtualHidden',
-  ],
+  props: {
+    statusId: {
+      // Main thing
+      type: String,
+      required: true,
+    },
+    collapsable: {
+      // Whether conversation can be collapsed
+      // i.e. when it's not a page
+      type: Boolean,
+      default: false,
+    },
+    isPage: {
+      // Whether conversation is rendered as a standalone page
+      // as opposed to embedded into a timeline
+      type: Boolean,
+      default: false,
+    },
+    pinnedStatusIdsObject: {
+      // Used for user profile, map of pinned statuses
+      type: Object,
+      default: null,
+    },
+    inProfile: {
+      // Whether conversation is rendered in a user profile
+      // used for overriding muted status
+      type: Boolean,
+      default: false,
+    },
+    profileUserId: {
+      // used with inProfile, user id of the profile
+      type: String,
+      default: null,
+    },
+    virtualHidden: {
+      // Whether conversation is suspended. Controls rendering of statuses
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       highlight: null,
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 16418d389..1f3982606 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -58,7 +58,6 @@
         <Status
           v-for="status in visibleStatuses"
           :key="status.id"
-          :collapsable="false"
           :expandable="false"
           :compact="false"
           class="search-result"
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 81dad3bd3..287934657 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -71,27 +71,27 @@
         class="timeline"
         role="feed"
       >
-        <conversation
+        <Conversation
           v-for="statusId in filteredPinnedStatusIds"
           :key="statusId + '-pinned'"
           role="listitem"
           class="status-fadein"
           :status-id="statusId"
-          :collapsable="true"
           :pinned-status-ids-object="pinnedStatusIdsObject"
           :in-profile="inProfile"
           :profile-user-id="userId"
+          collapsable
         />
-        <conversation
+        <Conversation
           v-for="status in filteredVisibleStatuses"
           :key="status.id"
           role="listitem"
           class="status-fadein"
           :status-id="status.id"
-          :collapsable="true"
           :in-profile="inProfile"
           :profile-user-id="userId"
           :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
+          collapsable
         />
       </div>
     </div>

From 4aa75a278bbc96eeb2bfff16f49c9df8d647de8b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 14:42:27 +0300
Subject: [PATCH 24/53] fix emoji copying

---
 src/api/admin.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/admin.js b/src/api/admin.js
index 67fb5038b..c33f863a7 100644
--- a/src/api/admin.js
+++ b/src/api/admin.js
@@ -435,7 +435,7 @@ export const downloadRemoteEmojiPackZIP = ({
   return promisedRequest({
     url: EMOJI_PACKS_DL_REMOTE_ZIP_URL,
     method: 'POST',
-    payload: data,
+    formData: data,
   })
 }
 
@@ -460,7 +460,7 @@ export const addNewEmojiFile = ({ packName, file, shortcode, filename }) => {
   return promisedRequest({
     url: EMOJI_UPDATE_FILE_URL(packName),
     method: 'POST',
-    payload: data,
+    formData: data,
   })
 }
 

From 7f42e0e5a720dc160a9e34dd943760befffc40b9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 14:44:25 +0300
Subject: [PATCH 25/53] cleanup

---
 src/api/user.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/api/user.js b/src/api/user.js
index b9035da77..17e13195d 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -181,9 +181,6 @@ export const unmuteConversation = ({ id, credentials }) =>
   }).then(({ data, ...rest }) => ({ ...rest, data: parseStatus(data) }))
 
 export const vote = ({ pollId, choices, credentials }) => {
-  const form = new FormData()
-  form.append('choices', choices)
-
   return promisedRequest({
     url: MASTODON_VOTE_URL(encodeURIComponent(pollId)),
     method: 'POST',

From 589889ad31e8a37e84465077e1ca85f1696906fd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 15:24:02 +0300
Subject: [PATCH 26/53] sane default for notice timeout

---
 src/stores/interface.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stores/interface.js b/src/stores/interface.js
index 6e82dc5f9..951811c62 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -205,7 +205,7 @@ export const useInterfaceStore = defineStore('interface', {
       messageKey,
       messageArgs = {},
       level = 'error',
-      timeout = 0,
+      timeout = 5000,
     }) {
       const notice = {
         messageKey,
@@ -218,7 +218,7 @@ export const useInterfaceStore = defineStore('interface', {
       // Adding a new element to array wraps it in a Proxy, which breaks the comparison
       // TODO: Generate UUID or something instead or relying on !== operator?
       const newNotice = this.globalNotices[this.globalNotices.length - 1]
-      if (timeout) {
+      if (timeout > 0) {
         setTimeout(() => this.removeGlobalNotice(newNotice), timeout)
       }
 

From 18f4335ff8b5c5aa5b759dff8e06eaa8131d3807 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 15:28:18 +0300
Subject: [PATCH 27/53] fix import button on emoji tab

---
 .../settings_modal/admin_tabs/emoji_tab.vue          | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 038f522b1..b118e0c52 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -56,18 +56,14 @@
           <Popover
             ref="additionalRemotePopover"
             popover-class="emoji-tab-edit-popover popover-default"
+            class="button button-default emoji-panel-additional-actions"
+            :title="$t('admin_dash.emoji.import_pack')"
             trigger="click"
             placement="bottom"
           >
             <template #trigger>
-              <button
-                class="button button-default emoji-panel-additional-actions"
-                :title="$t('admin_dash.emoji.import_pack')"
-                @click="$refs.additionalRemotePopover.showPopover"
-              >
-                <FAIcon icon="folder-open" />
-                {{ $t('admin_dash.emoji.import_pack_short') }}
-              </button>
+              <FAIcon icon="folder-open" />
+              {{ $t('admin_dash.emoji.import_pack_short') }}
             </template>
 
             <template #content>

From 937421fba8fb898273b172503cc55c3e8485c937 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 15:31:53 +0300
Subject: [PATCH 28/53] loading bookmark folder menu causes popover position
 issues and fix is too involved so just load it eagerly for now

---
 src/components/status_action_buttons/action_button.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
index e3cdf1fb1..01603ef2b 100644
--- a/src/components/status_action_buttons/action_button.js
+++ b/src/components/status_action_buttons/action_button.js
@@ -2,6 +2,7 @@ import { defineAsyncComponent } from 'vue'
 
 import Popover from 'src/components/popover/popover.vue'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -72,12 +73,7 @@ export default {
     'outerClose',
   ],
   components: {
-    StatusBookmarkFolderMenu: defineAsyncComponent(
-      () =>
-        import(
-          'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
-        ),
-    ),
+    StatusBookmarkFolderMenu,
     EmojiPicker,
     Popover,
   },

From 8ffc2e29069b36f9e71e79fdbd0541ab0d5b3a91 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 15:38:55 +0300
Subject: [PATCH 29/53] more fixes for emoji popover

---
 .../still-image/still-image-emoji-popover.js          | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/still-image/still-image-emoji-popover.js b/src/components/still-image/still-image-emoji-popover.js
index 92cc20904..6db72c49f 100644
--- a/src/components/still-image/still-image-emoji-popover.js
+++ b/src/components/still-image/still-image-emoji-popover.js
@@ -45,12 +45,7 @@ export default {
           shortcode: this.shortcode,
           filename: '',
         })
-        .then((resp) => resp.json())
-        .then((resp) => {
-          if (resp.error !== undefined) {
-            this.displayError(resp.error)
-            return
-          }
+        .then(({ data: resp }) => {
           useInterfaceStore().pushGlobalNotice({
             messageKey: 'admin_dash.emoji.copied_successfully',
             messageArgs: [this.shortcode, this.packName],
@@ -60,6 +55,10 @@ export default {
           this.$refs.emojiPopover.hidePopover()
           this.packName = ''
         })
+        .catch((e) => {
+          this.displayError(e)
+          return
+        })
     },
 
     fetchEmojiPacksIfAdmin() {

From 3e0e4af4f9198a291d41e34b5c63fb4ef9dcec7b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 16:24:36 +0300
Subject: [PATCH 30/53] fix media attachment in post status form

---
 src/components/post_status_form/post_status_form.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a5e6ffb6d..6c82d4b48 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -409,8 +409,8 @@
         :remove-attachment="removeMediaFile"
         :shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
         :shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
-        @play="$emit('mediaplay', attachment.id)"
-        @pause="$emit('mediapause', attachment.id)"
+        @play="$emit('mediaplay', 'newStatus')"
+        @pause="$emit('mediapause', 'newStatus')"
       />
       <div
         v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"

From 57c26c25b36fb4ebc8f665d82631d6ff98e782fe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 20:39:06 +0300
Subject: [PATCH 31/53] missing localization in admin tabs

---
 src/i18n/en.json | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 7da5524db..4a35b48f5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1480,10 +1480,36 @@
             "description": "Number of retries for making a connection CONFIRM"
           }
         },
+        ":hackney_pools": {
+          ":rich_media": {
+            "label": "Rich media",
+            "description": "idk",
+            ":max_connections": {
+              "label": "Max connections",
+              "description": "Number workers in the pool."
+            },
+            ":timeout": {
+              "label": "Timeout",
+              "description": "Timeout while `hackney` will wait for response."
+            }
+          }
+        },
         ":pools": {
           ":rich_media": {
             "label": "Rich media",
-            "description": "idk"
+            "description": "idk",
+            ":size": {
+              "label": "Size",
+              "description": "Maximum number of concurrent requests in the pool."
+            },
+            ":max_waiting": {
+              "label": "Max waiting",
+              "description": "Maximum number of requests waiting for other requests to finish. After this number is reached, the pool will start returning errors when a new request is made"
+            },
+            ":recv_timeout": {
+              "label": "Recv timeout",
+              "description": "Timeout for the pool while gun will wait for response"
+            }
           }
         },
         ":rate_limit": {

From 087085f05e8e2699362db112cac95274b401ffc4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 20:39:16 +0300
Subject: [PATCH 32/53] better styles for frontends tab

---
 src/components/settings_modal/admin_tabs/frontends_tab.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
index 8b7b1f4e3..4516889dc 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -54,7 +54,7 @@
   dd {
     text-overflow: ellipsis;
     white-space: nowrap;
-    overflow-x: hidden;
+    overflow: hidden;
   }
 
 }

From 0665640660281fe10e6ac8d572f56f4c26640b95 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 20:45:24 +0300
Subject: [PATCH 33/53] fix rate setting

---
 src/components/settings_modal/helpers/rate_setting.js  | 2 +-
 src/components/settings_modal/helpers/rate_setting.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/helpers/rate_setting.js b/src/components/settings_modal/helpers/rate_setting.js
index 0c37abb87..50a804f1a 100644
--- a/src/components/settings_modal/helpers/rate_setting.js
+++ b/src/components/settings_modal/helpers/rate_setting.js
@@ -45,7 +45,7 @@ export default {
         if (event === 'split') {
           return [this.normalizedState[0], this.normalizedState[0]]
         } else if (event === 'join') {
-          return [this.normalizedState[0]]
+          return this.normalizedState[0]
         }
       }
     },
diff --git a/src/components/settings_modal/helpers/rate_setting.vue b/src/components/settings_modal/helpers/rate_setting.vue
index bb361dfb9..6a573d016 100644
--- a/src/components/settings_modal/helpers/rate_setting.vue
+++ b/src/components/settings_modal/helpers/rate_setting.vue
@@ -88,7 +88,7 @@
       </table>
       <Checkbox
         :model-value="isSeparate"
-        @update:model-value="event => update({ event: event ? 'join' : 'split', eventType: 'toggleMode' })"
+        @update:model-value="event => update({ event: event ? 'split' : 'join', eventType: 'toggleMode' })"
       >
         {{ $t('admin_dash.rate_limit.separate') }}
       </Checkbox>

From d1f67f08892ca8d1d259dcfc43be7a7d9c62ffb0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 23:52:11 +0300
Subject: [PATCH 34/53] lint

---
 src/boot/after_store.js                       |  7 ++++++-
 src/components/status/status.js               | 10 +---------
 .../status_action_buttons/action_button.js    |  4 +---
 src/components/status_body/status_body.js     |  8 ++++++--
 src/modules/statuses.js                       |  4 +++-
 src/services/style_setter/style_setter.js     | 20 ++++++++++---------
 6 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index d24684865..4ccfa4d41 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -468,7 +468,12 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   app.use(pinia)
 
   app.config.errorHandler = (error, instance, info) => {
-    console.error('Global Vue Error Handler caught an error:', error, instance, info)
+    console.error(
+      'Global Vue Error Handler caught an error:',
+      error,
+      instance,
+      info,
+    )
     useInterfaceStore().setGlobalError({ error, instance, info })
   }
 
diff --git a/src/components/status/status.js b/src/components/status/status.js
index ecbca4c94..0cfc7cdba 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -73,8 +73,6 @@ library.add(
   faPlay,
 )
 
-const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
-
 const Status = {
   name: 'Status',
   components: {
@@ -108,7 +106,6 @@ const Status = {
     inProfile: Boolean,
     inConversation: Boolean,
     inQuote: Boolean,
-    canDive: Boolean,
 
     profileUserId: String,
     simpleTree: Boolean,
@@ -118,12 +115,7 @@ const Status = {
 
     threadDisplayStatus: String,
   },
-  emits: [
-    'goto',
-    'dive',
-    'toggleExpanded',
-    'suspendableStateChange'
-  ],
+  emits: ['goto', 'dive', 'toggleExpanded', 'suspendableStateChange'],
   data() {
     return {
       replying: false,
diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
index 01603ef2b..f3dd13e43 100644
--- a/src/components/status_action_buttons/action_button.js
+++ b/src/components/status_action_buttons/action_button.js
@@ -1,8 +1,6 @@
-import { defineAsyncComponent } from 'vue'
-
 import Popover from 'src/components/popover/popover.vue'
-import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 2da6da555..7a46a1a3b 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -43,7 +43,7 @@ const StatusBody = {
       // Used to automatically expand subjects (if collapsed)
       type: Boolean,
       default: false,
-    }
+    },
   },
   data() {
     return {
@@ -76,7 +76,11 @@ const StatusBody = {
     // button. If the default is to collapse statuses with subjects, we just treat it like
     // a status with a subject; otherwise, we just treat it like a tall status.
     mightHideBecauseSubject() {
-      return !this.inConversation && this.hasSubject && this.mergedConfig.collapseMessageWithSubject
+      return (
+        !this.inConversation &&
+        this.hasSubject &&
+        this.mergedConfig.collapseMessageWithSubject
+      )
     },
     mightHideBecauseTall() {
       if (this.singleLine || this.compact) return false
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 6b71fa5e9..5bec225ce 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -887,7 +887,9 @@ const statuses = {
           statuses: data.statuses,
         })
 
-        data.statuses = data.statuses.map((s) => store.state.allStatusesObject[s.id])
+        data.statuses = data.statuses.map(
+          (s) => store.state.allStatusesObject[s.id],
+        )
         return data
       })
     },
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index dfb52f50d..0ea0341e2 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -2,14 +2,13 @@ import sum from 'hash-sum'
 import localforage from 'localforage'
 import { chunk, throttle } from 'lodash'
 
-import { promisedRequest } from 'src/api/helpers.js'
-
 import { getCssRules } from '../theme_data/css_utils.js'
 import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
+import { promisedRequest } from 'src/api/helpers.js'
 import { ROOT_CONFIG } from 'src/modules/default_config_state.js'
 
 // On platforms where this is not supported, it will return undefined
@@ -302,7 +301,7 @@ export const applyStyleConfig = (input) => {
   adoptStyleSheets()
 }
 
-export const getResourcesIndex = async (url, parser = x => x) => {
+export const getResourcesIndex = async (url, parser = (x) => x) => {
   const cache = 'no-store'
   const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
   let builtin
@@ -320,11 +319,11 @@ export const getResourcesIndex = async (url, parser = x => x) => {
               url: v,
               cache,
             })
-            .then(({ data: text }) => parser(text))
-            .catch((e) => {
-              console.error(e)
-              return null
-            }),
+              .then(({ data: text }) => parser(text))
+              .catch((e) => {
+                console.error(e)
+                return null
+              }),
         ]
       } else {
         console.error(`Unknown resource format - ${k} is a ${typeof v}`)
@@ -342,7 +341,10 @@ export const getResourcesIndex = async (url, parser = x => x) => {
   }
 
   try {
-    const { data: customData } = await promisedRequest({ url: customUrl, cache })
+    const { data: customData } = await promisedRequest({
+      url: customUrl,
+      cache,
+    })
     custom = resourceTransform(customData)
   } catch {
     custom = []

From b60b7423a0e2e6d4aebe9108b569fd29e7098466 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 23:54:08 +0300
Subject: [PATCH 35/53] lack of changelog

---
 changelog.d/more-fixes.skip | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 changelog.d/more-fixes.skip

diff --git a/changelog.d/more-fixes.skip b/changelog.d/more-fixes.skip
new file mode 100644
index 000000000..e69de29bb

From 0c8759ad7d6f640337815470a264cd853c684561 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Jun 2026 23:56:17 +0300
Subject: [PATCH 36/53] event name

---
 src/components/edit_status_modal/edit_status_modal.vue | 2 +-
 test/unit/specs/components/draft.spec.js               | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index 3d192b1ee..502a937f6 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -16,7 +16,7 @@
         :params="params"
         @posted="doCloseModal"
         @draft-done="doCloseModal"
-        @can-close="doCloseModal"
+        @close-accepted="doCloseModal"
       />
     </div>
   </Modal>
diff --git a/test/unit/specs/components/draft.spec.js b/test/unit/specs/components/draft.spec.js
index be2400fc3..b69d2323e 100644
--- a/test/unit/specs/components/draft.spec.js
+++ b/test/unit/specs/components/draft.spec.js
@@ -100,7 +100,7 @@ describe('Draft saving', () => {
     await textarea.setValue('mew mew')
     wrapper.vm.requestClose()
     expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
-    await waitForEvent(wrapper, 'can-close')
+    await waitForEvent(wrapper, 'close-accepted')
   })
 
   it('should save when close if auto-save is off, and unsavedPostAction is save', async () => {
@@ -122,7 +122,7 @@ describe('Draft saving', () => {
     await textarea.setValue('mew mew')
     wrapper.vm.requestClose()
     expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
-    await waitForEvent(wrapper, 'can-close')
+    await waitForEvent(wrapper, 'close-accepted')
   })
 
   it('should discard when close if auto-save is off, and unsavedPostAction is discard', async () => {
@@ -143,7 +143,7 @@ describe('Draft saving', () => {
     const textarea = wrapper.get('textarea')
     await textarea.setValue('mew mew')
     wrapper.vm.requestClose()
-    await waitForEvent(wrapper, 'can-close')
+    await waitForEvent(wrapper, 'close-accepted')
     expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
   })
 
@@ -180,6 +180,6 @@ describe('Draft saving', () => {
     console.info('clicked')
     expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
     await flushPromises()
-    await waitForEvent(wrapper, 'can-close')
+    await waitForEvent(wrapper, 'close-accepted')
   })
 })

From 1d95c43ecafce826aa2867389181272e7854ba9b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 1 Jul 2026 14:59:04 +0300
Subject: [PATCH 37/53] oops

---
 src/components/conversation/conversation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 8a46722ad..9bd8a96f9 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -156,7 +156,7 @@
 
           :is-focused-function="isFocused"
           :get-replies="getReplies"
-          :highlight="maybeHighlight === status.id"
+          :highlight="maybeHighlight"
           :toggle-expanded="toggleExpanded"
 
           :simple="treeViewIsSimple"

From 7e507b142bf7c269b951734b74d63a7f1455bca9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 1 Jul 2026 15:03:30 +0300
Subject: [PATCH 38/53] fixed locked users

---
 src/modules/api.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/api.js b/src/modules/api.js
index 72d7fb4d7..232d1776d 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -302,7 +302,7 @@ const api = {
     // Follow requests
     startFetchingFollowRequests(store) {
       if (store.state.fetchers.followRequests) return
-      const fetcher = followRequestFetcher.startFetchingFollowRequests({
+      const fetcher = followRequestFetcher.startFetching({
         store,
         credentials: useOAuthStore().token,
       })

From 1ee22f6bddf311e68a69f01d668ff6b05c7330e8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 2 Jul 2026 13:50:46 +0300
Subject: [PATCH 39/53] add contrast ratio display to palette

---
 .../palette_editor/palette_editor.vue         | 46 +++++++++++++++----
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index eec9fe361..5b89f2af2 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -4,15 +4,21 @@
     :class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
   >
     <div class="palette">
-      <ColorInput
-        v-for="key in paletteKeys"
-        :key="key"
-        :name="key"
-        :model-value="props.modelValue[key]"
-        :fallback="fallback(key)"
-        :label="$t('settings.style.themes3.palette.' + key)"
-        @update:model-value="value => updatePalette(key, value)"
-      />
+      <div v-for="key in paletteKeys">
+        <ColorInput
+          :key="key"
+          :name="key"
+          :model-value="props.modelValue[key]"
+          :fallback="fallback(key)"
+          :label="$t('settings.style.themes3.palette.' + key)"
+          @update:model-value="value => updatePalette(key, value)"
+        />
+        <ContrastRatio
+          v-if="contrast[key]"
+          :show-ratio="true"
+          :contrast="contrast[key]"
+        />
+      </div>
     </div>
     <div class="buttons">
       <button
@@ -48,6 +54,9 @@
 import { computed } from 'vue'
 
 import ColorInput from 'src/components/color_input/color_input.vue'
+import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
+
+import { getContrastRatio, hex2rgb } from 'src/services/color_convert/color_convert.js'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
 
@@ -106,6 +115,16 @@ const importPalette = () => {
   paletteImporter.importData()
 }
 
+const hints = (ratio) => ({
+  text: ratio.toPrecision(3) + ':1',
+  // AA level, AAA level
+  aa: ratio >= 4.5,
+  aaa: ratio >= 7,
+  // same but for 18pt+ texts
+  laa: ratio >= 3,
+  laaa: ratio >= 4.5,
+})
+
 const applyPalette = () => {
   emit('applyPalette', getExportedObject())
 }
@@ -114,6 +133,15 @@ const mobile = computed(() => {
   return useInterfaceStore().layoutType === 'mobile'
 })
 
+const contrast = computed(() => {
+  const bg = hex2rgb(props.modelValue.bg)
+
+  return {
+    text: hints(getContrastRatio(bg, hex2rgb(props.modelValue.text))),
+    link: hints(getContrastRatio(bg, hex2rgb(props.modelValue.link))),
+  }
+})
+
 const fallback = (key) => {
   if (key === 'accent') {
     return props.modelValue.link

From fe7315bdb5509fd1bc688d01e7eafb1af0422523 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 2 Jul 2026 13:57:02 +0300
Subject: [PATCH 40/53] fix regexp error in suggestor

---
 src/components/emoji_input/suggestor.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index fe8e9e105..d5e83ecb2 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -26,14 +26,14 @@ export default (data) => {
 }
 
 export const suggestEmoji = (emojis) => (input, nameKeywordLocalizer) => {
-  const noPrefix = input.toLowerCase().substr(1)
+  const noPrefix = input.toLowerCase().substring(1)
   return emojis
     .map((emoji) => ({ ...emoji, ...nameKeywordLocalizer(emoji) }))
     .filter(
       (emoji) =>
         emoji.names
           .concat(emoji.keywords)
-          .filter((kw) => kw.toLowerCase().match(noPrefix)).length,
+          .filter((kw) => kw.toLowerCase().includes(noPrefix)).length,
     )
     .map((k) => {
       let score = 0

From 6c9b4a48d8330e93b253401a37e7861e67f6dd79 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 6 Jul 2026 19:08:51 +0300
Subject: [PATCH 41/53] lint

---
 src/components/error_modal/error_modal.vue       | 5 ++++-
 src/components/global_error/global_error.vue     | 5 ++++-
 src/components/palette_editor/palette_editor.vue | 6 ++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/error_modal/error_modal.vue b/src/components/error_modal/error_modal.vue
index 7429e8bdc..ef2654b2e 100644
--- a/src/components/error_modal/error_modal.vue
+++ b/src/components/error_modal/error_modal.vue
@@ -25,7 +25,10 @@
 
           <details open>
             <summary>{{ $t('general.generic_error_details') }}</summary>
-            <code class="stack pre" v-text="error.stack" />
+            <code
+              class="stack pre"
+              v-text="error.stack"
+            />
           </details>
         </slot>
       </div>
diff --git a/src/components/global_error/global_error.vue b/src/components/global_error/global_error.vue
index 3c3901d4f..2b6e83655 100644
--- a/src/components/global_error/global_error.vue
+++ b/src/components/global_error/global_error.vue
@@ -13,7 +13,10 @@
 
         <details v-if="details">
           <summary>{{ $t('general.generic_error_details') }}</summary>
-          <code class="stack pre" v-text="details" />
+          <code
+            class="stack pre"
+            v-text="details"
+          />
         </details>
       </template>
     </ErrorModal>
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index 5b89f2af2..8fe6ba5c4 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -4,9 +4,11 @@
     :class="{ '-compact': compact, '-apply': apply, '-mobile': mobile }"
   >
     <div class="palette">
-      <div v-for="key in paletteKeys">
+      <div
+        v-for="key in paletteKeys"
+        :key="key"
+      >
         <ColorInput
-          :key="key"
           :name="key"
           :model-value="props.modelValue[key]"
           :fallback="fallback(key)"

From ddc126f696a3b780ceab0a5293212c3f5207415a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 6 Jul 2026 19:43:08 +0300
Subject: [PATCH 42/53] fix and refactor the way status focusing work

---
 src/components/conversation/conversation.js  | 27 +++++++++-----------
 src/components/conversation/conversation.vue | 15 +++++------
 src/components/status/status.js              | 27 ++++++--------------
 src/components/status/status.vue             |  7 +++--
 src/components/thread_tree/thread_tree.js    |  4 +--
 src/components/thread_tree/thread_tree.vue   |  7 ++---
 6 files changed, 32 insertions(+), 55 deletions(-)

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 1bc9f3858..00605657e 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -97,7 +97,7 @@ const conversation = {
   },
   data() {
     return {
-      highlight: null,
+      focused: null,
       expanded: false,
       threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
       inlineDivePosition: null,
@@ -389,6 +389,9 @@ const conversation = {
     canDive() {
       return this.isTreeView && this.isExpanded
     },
+    maybeFocused() {
+      return this.isExpanded ? this.focused : null
+    },
     ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
     ...mapState({
       mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
@@ -411,7 +414,7 @@ const conversation = {
         oldConversationId &&
         newConversationId === oldConversationId
       ) {
-        this.setHighlight(this.originalStatusId)
+        this.setFocused(this.originalStatusId)
       } else {
         this.fetchConversation()
       }
@@ -439,7 +442,7 @@ const conversation = {
         }).then(({ data: { ancestors, descendants } }) => {
           this.$store.dispatch('addNewStatuses', { statuses: ancestors })
           this.$store.dispatch('addNewStatuses', { statuses: descendants })
-          this.setHighlight(this.originalStatusId)
+          this.setFocused(this.originalStatusId)
         })
       } else {
         this.loadStatusError = null
@@ -457,18 +460,12 @@ const conversation = {
           })
       }
     },
-    isFocused(id) {
-      return this.isExpanded && id === this.highlight
-    },
     getReplies(id) {
       return this.replies[id] || []
     },
-    maybeHighlight() {
-      return this.isExpanded ? this.highlight : null
-    },
-    setHighlight(id) {
+    setFocused(id) {
       if (!id) return
-      this.highlight = id
+      this.focused = id
 
       if (!this.streamingEnabled) {
         this.$store.dispatch('fetchStatus', id)
@@ -533,7 +530,7 @@ const conversation = {
     // only used when we are not on a page
     undive() {
       this.inlineDivePosition = null
-      this.setHighlight(this.statusId)
+      this.setFocused(this.statusId)
     },
     tryScrollTo(id) {
       if (!id) {
@@ -551,7 +548,7 @@ const conversation = {
       // contain scrolling calls, as we do not want the page to jump
       // when we scroll with an expanded conversation.
       //
-      // Now the method is to rely solely on the `highlight` watcher
+      // Now the method is to rely solely on the `focused` watcher
       // in `status` components.
       // In linear views, all statuses are rendered at all times, but
       // in tree views, it is possible that a change in active status
@@ -559,9 +556,9 @@ const conversation = {
       // status becomes an ancestor status, and thus they will be
       // different).
       // Here, let the components be rendered first, in order to trigger
-      // the `highlight` watcher.
+      // the `focused` watcher.
       this.$nextTick(() => {
-        this.setHighlight(id)
+        this.setFocused(id)
       })
     },
     goToCurrent() {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 9bd8a96f9..684a5de92 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -96,8 +96,7 @@
               :replies="getReplies(status.id)"
 
               :expandable="!isExpanded"
-              :focused="isFocused(status.id)"
-              :highlight="maybeHighlight"
+              :focused="maybeFocused === status.id"
               :inline-expanded="collapsable && isExpanded"
               :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
               :in-profile="inProfile"
@@ -107,7 +106,7 @@
               :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
               can-dive
 
-              @goto="setHighlight"
+              @goto="setFocused"
               @dive="() => diveIntoStatus(status.id)"
               @suspendable-state-change="onStatusSuspendStateChange"
             />
@@ -154,9 +153,8 @@
           :pinned-status-ids-object="pinnedStatusIdsObject"
           :profile-user-id="profileUserId"
 
-          :is-focused-function="isFocused"
           :get-replies="getReplies"
-          :highlight="maybeHighlight"
+          :focused="maybeFocused"
           :toggle-expanded="toggleExpanded"
 
           :simple="treeViewIsSimple"
@@ -166,7 +164,7 @@
           :total-reply-depth="totalReplyDepth"
           :can-dive="canDive"
 
-          @goto="setHighlight"
+          @goto="setFocused"
           @dive="diveIntoStatus"
           @suspendable-state-change="onStatusSuspendStateChange"
         />
@@ -185,15 +183,14 @@
             :replies="getReplies(status.id)"
 
             :expandable="!isExpanded"
-            :focused="isFocused(status.id)"
-            :highlight="maybeHighlight === status.id"
+            :focused="maybeFocused === status.id || maybeFocused === status.retweeted_status?.id"
             :inline-expanded="collapsable && isExpanded"
             :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
             :in-profile="inProfile"
             :in-conversation="isExpanded"
             :profile-user-id="profileUserId"
 
-            @goto="setHighlight"
+            @goto="setFocused"
             @toggle-expanded="toggleExpanded"
             @suspendable-state-change="onStatusSuspendStateChange"
           />
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 0cfc7cdba..996dc6437 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -97,7 +97,6 @@ const Status = {
 
     expandable: Boolean,
     focused: Boolean,
-    highlight: Boolean,
     compact: Boolean,
     isPreview: Boolean,
     noHeading: Boolean,
@@ -320,7 +319,7 @@ const Status = {
     },
     shouldNotMute() {
       if (this.ignoreMute) return true
-      if (this.isFocused) return true
+      if (this.focused) return true
       const { status } = this
       const { reblog } = status
       return (
@@ -357,16 +356,6 @@ const Status = {
           this.muteFilterHits.some((x) => x.hide))
       )
     },
-    isFocused() {
-      // retweet or root of an expanded conversation
-      if (this.focused) {
-        return true
-      } else if (!this.inConversation) {
-        return false
-      }
-      // use conversation highlight only when in conversation
-      return this.status.id === this.highlight
-    },
     isReply() {
       return !!(
         this.status.in_reply_to_status_id && this.status.in_reply_to_user_id
@@ -415,7 +404,7 @@ const Status = {
     shouldDisplayFavsAndRepeats() {
       return (
         !this.hidePostStats &&
-        this.isFocused &&
+        this.focused &&
         (this.combinedFavsAndRepeatsUsers.length > 0 ||
           this.statusFromGlobalRepository.quotes_count)
       )
@@ -558,9 +547,9 @@ const Status = {
     toggleThreadDisplay() {
       this.controlledToggleThreadDisplay()
     },
-    scrollIfHighlighted(highlightId) {
+    scrollIfFocused(focusedId) {
       if (this.$el.getBoundingClientRect == null) return
-      const id = highlightId
+      const id = focusedId
       if (this.status.id === id) {
         const rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
@@ -577,13 +566,13 @@ const Status = {
     },
   },
   watch: {
-    highlight: function (id) {
-      this.scrollIfHighlighted(id)
+    focused: function (id) {
+      this.scrollIfFocused(id)
     },
     'status.repeat_num': function (num) {
       // refetch repeats when repeat_num is changed in any way
       if (
-        this.isFocused &&
+        this.focused &&
         this.statusFromGlobalRepository.rebloggedBy &&
         this.statusFromGlobalRepository.rebloggedBy.length !== num
       ) {
@@ -593,7 +582,7 @@ const Status = {
     'status.fave_num': function (num) {
       // refetch favs when fave_num is changed in any way
       if (
-        this.isFocused &&
+        this.focused &&
         this.statusFromGlobalRepository.favoritedBy &&
         this.statusFromGlobalRepository.favoritedBy.length !== num
       ) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f301ad890..4dcc1e07d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -3,7 +3,7 @@
     v-if="!hideStatus"
     ref="root"
     class="Status"
-    :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
+    :class="[{ '-focused': focused }, { '-conversation': inlineExpanded }]"
   >
     <div
       v-if="error"
@@ -409,8 +409,7 @@
           <StatusContent
             ref="content"
             :status="status"
-            :highlight="highlight"
-            :focused="isFocused"
+            :focused="focused"
             :in-conversation="inConversation"
             @mediaplay="addMediaPlaying($event)"
             @mediapause="removeMediaPlaying($event)"
@@ -507,7 +506,7 @@
           </transition>
 
           <EmojiReactions
-            v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
+            v-if="(mergedConfig.emojiReactionsOnTimeline || focused) && (!noHeading && !isPreview)"
             :status="status"
           />
 
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 7631d127f..75232a259 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -19,10 +19,8 @@ const ThreadTree = {
     pinnedStatusIdsObject: Object,
     profileUserId: String,
 
-    isFocusedFunction: Function,
-    highlight: String,
+    focused: String,
     getReplies: Function,
-    setHighlight: Function,
     toggleExpanded: Function,
 
     simple: Boolean,
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 72f8512e5..556858ad7 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -8,9 +8,8 @@
       :inline-expanded="collapsable && isExpanded"
       :expandable="!isExpanded"
       :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-      :focused="isFocusedFunction(status.id)"
       :in-conversation="isExpanded"
-      :highlight="highlight === status.id"
+      :focused="focused === status.id || focused === status.retweeted_status?.id"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
       class="conversation-status conversation-status-treeview status-fadein panel-body"
@@ -42,10 +41,8 @@
         :pinned-status-ids-object="pinnedStatusIdsObject"
         :profile-user-id="profileUserId"
 
-        :is-focused-function="isFocusedFunction"
         :get-replies="getReplies"
-        :highlight="highlight"
-        :set-highlight="setHighlight"
+        :focused="focused"
         :toggle-expanded="toggleExpanded"
 
         :simple="simple"

From 72d5307fd9b9b8bf4f079217bde8280e206e150d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 6 Jul 2026 19:43:20 +0300
Subject: [PATCH 43/53] fix palette editor

---
 src/components/palette_editor/palette_editor.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index 8fe6ba5c4..80c55d635 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -16,7 +16,7 @@
           @update:model-value="value => updatePalette(key, value)"
         />
         <ContrastRatio
-          v-if="contrast[key]"
+          v-if="contrast?.[key]"
           :show-ratio="true"
           :contrast="contrast[key]"
         />
@@ -136,11 +136,15 @@ const mobile = computed(() => {
 })
 
 const contrast = computed(() => {
+  if (props.modelValue == null) return null
   const bg = hex2rgb(props.modelValue.bg)
+  const text = hex2rgb(props.modelValue.text)
+  const link = hex2rgb(props.modelValue.link)
+  if (text == null || link == null) return null
 
   return {
-    text: hints(getContrastRatio(bg, hex2rgb(props.modelValue.text))),
-    link: hints(getContrastRatio(bg, hex2rgb(props.modelValue.link))),
+    text: hints(getContrastRatio(bg, text)),
+    link: hints(getContrastRatio(bg, link)),
   }
 })
 

From 01dd3876f01c4e3d86c45ad640e91efa7d8d8f4e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 6 Jul 2026 19:43:43 +0300
Subject: [PATCH 44/53] use local colors for code highlight

---
 src/App.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index be3f0df22..0de5a3577 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -145,8 +145,8 @@ h4 {
 }
 
 code {
-  background: var(--bg);
-  border: 1px solid var(--fg);
+  background: var(--background);
+  border: 1px solid var(--border);
   border-radius: var(--roundness);
   padding: 0 0.2em;
 

From 1f667832f80cd83e866396163a09678a01468429 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 6 Jul 2026 19:47:03 +0300
Subject: [PATCH 45/53] stylistic changes to palette editor + mobile fixes

---
 src/components/palette_editor/palette_editor.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index 80c55d635..b27b21f00 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -20,6 +20,7 @@
           :show-ratio="true"
           :contrast="contrast[key]"
         />
+        <div v-else>{{ '&nbsp;' }}</div>
       </div>
     </div>
     <div class="buttons">
@@ -238,15 +239,6 @@ const updatePalette = (paletteKey, value) => {
         grid-column: 1 / span 2;
       }
     }
-
-    .color-input {
-      display: grid;
-      gap: 0.5em;
-
-      label {
-        flex: 1;
-      }
-    }
   }
 }
 </style>

From 832dad842aac061fee9ac8f2c8147e8e25238085 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jul 2026 21:21:07 +0300
Subject: [PATCH 46/53] fix chat, lint

---
 src/components/chat/chat.js                      | 3 ++-
 src/components/palette_editor/palette_editor.vue | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 16a03ab1d..273d9d85d 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -16,6 +16,7 @@ import {
 } from './chat_layout_utils.js'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 
 import {
@@ -116,8 +117,8 @@ const Chat = {
       'currentChat',
       'currentChatMessageService',
       'findOpenedChatByRecipientId',
-      'mergedConfig',
     ]),
+    ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
     ...mapPiniaState(useInterfaceStore, {
       mobileLayout: (store) => store.layoutType === 'mobile',
     }),
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index b27b21f00..1a73d5fdb 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -59,10 +59,12 @@ import { computed } from 'vue'
 import ColorInput from 'src/components/color_input/color_input.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 
-import { getContrastRatio, hex2rgb } from 'src/services/color_convert/color_convert.js'
-
 import { useInterfaceStore } from 'src/stores/interface.js'
 
+import {
+  getContrastRatio,
+  hex2rgb,
+} from 'src/services/color_convert/color_convert.js'
 import {
   newExporter,
   newImporter,

From bb4eb33c853d0f0e4298fcb1860a8875775c0844 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jul 2026 17:49:43 +0300
Subject: [PATCH 47/53] fix chat message sending not working

---
 src/api/chats.js            | 2 +-
 src/api/helpers.js          | 3 ++-
 src/components/chat/chat.js | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/api/chats.js b/src/api/chats.js
index 51e83c74f..114038e52 100644
--- a/src/api/chats.js
+++ b/src/api/chats.js
@@ -4,7 +4,7 @@ import { parseChat } from 'src/services/entity_normalizer/entity_normalizer.serv
 
 const PLEROMA_CHATS_URL = '/api/v1/pleroma/chats'
 const PLEROMA_CHAT_URL = (id) => `/api/v1/pleroma/chats/by-account-id/${id}`
-const PLEROMA_CHAT_MESSAGES_URL = (id, { maxId, sinceId, limit }) =>
+const PLEROMA_CHAT_MESSAGES_URL = (id, { maxId, sinceId, limit } = {}) =>
   `/api/v1/pleroma/chats/${id}/messages${paramsString({ maxId, sinceId, limit })}`
 const PLEROMA_CHAT_READ_URL = (id) => `/api/v1/pleroma/chats/${id}/read`
 const PLEROMA_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) =>
diff --git a/src/api/helpers.js b/src/api/helpers.js
index f965750c5..ce41eca77 100644
--- a/src/api/helpers.js
+++ b/src/api/helpers.js
@@ -17,7 +17,6 @@ export const paramsString = (params = {}) => {
     }
   })()
 
-  if (entries.length === 0) return ''
 
   const arrays = []
   const nonArrays = []
@@ -48,6 +47,8 @@ export const paramsString = (params = {}) => {
     })
   })
 
+  if (nonArrays.length + arrays.length === 0) return ''
+
   return (
     '?' +
     [
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 273d9d85d..ca7a025ec 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -382,7 +382,7 @@ const Chat = {
       if (retriesLeft <= 0) return
 
       sendChatMessage({
-        params,
+        ...params,
         credentials: useOAuthStore().token,
       })
         .then(({ data }) => {

From ce032ace4c426394d99351ee0b737037fba6cab7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jul 2026 19:37:52 +0300
Subject: [PATCH 48/53] fix new chat

---
 src/components/chat_new/chat_new.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/chat_new/chat_new.js b/src/components/chat_new/chat_new.js
index 0ee4e292b..ccfe2df50 100644
--- a/src/components/chat_new/chat_new.js
+++ b/src/components/chat_new/chat_new.js
@@ -5,6 +5,8 @@ import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 
 import { useOAuthStore } from 'src/stores/oauth.js'
 
+import { chats } from 'src/api/chats.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronLeft, faSearch } from '@fortawesome/free-solid-svg-icons'
 
@@ -24,10 +26,10 @@ const chatNew = {
     }
   },
   async created() {
-    const { chats } = await chats({
+    const { chatList } = await chats({
       credentials: useOAuthStore().token,
     })
-    chats.forEach((chat) => this.suggestions.push(chat.account))
+    chatList.forEach((chat) => this.suggestions.push(chat.account))
   },
   computed: {
     users() {

From 7bc74083d0ff6fca1ac752ba81b3fc8dd776257e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 8 Jul 2026 20:31:17 +0300
Subject: [PATCH 49/53] fix post status for error handling

---
 .../post_status_form/post_status_form.js         | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index bb4051628..bd2b44e54 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -596,16 +596,18 @@ const PostStatusForm = {
         ? this.postHandler
         : statusPoster.postStatus
 
-      postHandler(postingOptions).then((data) => {
-        if (!data.error) {
+      postHandler(postingOptions)
+        .then((data) => {
           this.abandonDraft()
           this.clearStatus()
           this.$emit('posted', data)
-        } else {
-          this.error = data.error
-        }
-        this.posting = false
-      })
+        })
+        .catch((error) => {
+          this.error = error
+        })
+        .finally(() => {
+          this.posting = false
+        })
     },
     previewStatus() {
       if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {

From a724458fccb6a193f794e0871b9bee99d762688e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 10 Jul 2026 12:28:50 +0300
Subject: [PATCH 50/53] consistency for post/notification transparency

---
 src/components/notification/notification.scss     |  5 -----
 src/components/notification/notification.style.js | 10 ++++++++--
 src/components/notifications/notifications.vue    |  1 -
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 934d3e58d..3e2fa54a5 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -10,11 +10,6 @@
     cursor: pointer;
   }
 
-  &.Status {
-    /* stylelint-disable-next-line declaration-no-important */
-    background-color: transparent !important;
-  }
-
   --emoji-size: 1em;
 
   &:hover {
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
index 49e28cf2e..db5fc5b94 100644
--- a/src/components/notification/notification.style.js
+++ b/src/components/notification/notification.style.js
@@ -1,6 +1,6 @@
 export default {
   name: 'Notification',
-  selector: '.Notification',
+  selector: '.NotificationParent',
   validInnerComponents: [
     'Text',
     'Link',
@@ -9,5 +9,11 @@ export default {
     'Avatar',
     'PollGraph',
   ],
-  defaultRules: [],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+      },
+    },
+  ],
 }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 387c3a847..66819317b 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -51,7 +51,6 @@
           <NotificationFilters class="rightside-button" />
         </div>
         <div
-          class="panel-body"
           role="feed"
         >
           <div

From c5445096e8037f5626fe3cbe19044785a93f328b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 10 Jul 2026 12:35:29 +0300
Subject: [PATCH 51/53] fix remainder of inefficient imports

---
 src/boot/routes.js                          | 5 ++---
 src/components/global_error/global_error.js | 7 ++++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 9b00a8004..4e62f5761 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -11,6 +11,7 @@ import PublicTimeline from 'src/components/public_timeline/public_timeline.vue'
 import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
 import RemoteUserResolver from 'src/components/remote_user_resolver/remote_user_resolver.vue'
 import TagTimeline from 'src/components/tag_timeline/tag_timeline.vue'
+import AuthForm from 'src/components/auth_form/auth_form.js'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -147,9 +148,7 @@ export default (store) => {
     {
       name: 'login',
       path: '/login',
-      component: defineAsyncComponent(
-        () => import('src/components/auth_form/auth_form.js'),
-      ),
+      component: AuthForm,
     },
     {
       name: 'shout-panel',
diff --git a/src/components/global_error/global_error.js b/src/components/global_error/global_error.js
index cd4593521..92edec2ba 100644
--- a/src/components/global_error/global_error.js
+++ b/src/components/global_error/global_error.js
@@ -1,12 +1,13 @@
 import { mapActions, mapState } from 'pinia'
-
-import ErrorModal from 'src/components/error_modal/error_modal.vue'
+import { defineAsyncComponent } from 'vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
 
 const GlobalError = {
   components: {
-    ErrorModal,
+    ErrorModal: defineAsyncComponent(
+      () => import('src/components/error_modal/error_modal.vue')
+    ),
   },
   computed: {
     title() {

From 3a3d56c67045d2f193b621af0ea3dd94c38af1b8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 10 Jul 2026 12:41:11 +0300
Subject: [PATCH 52/53] lint

---
 src/api/helpers.js                          | 1 -
 src/boot/routes.js                          | 2 +-
 src/components/global_error/global_error.js | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/api/helpers.js b/src/api/helpers.js
index ce41eca77..4bf16e0cc 100644
--- a/src/api/helpers.js
+++ b/src/api/helpers.js
@@ -17,7 +17,6 @@ export const paramsString = (params = {}) => {
     }
   })()
 
-
   const arrays = []
   const nonArrays = []
 
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 4e62f5761..d50baab04 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 
+import AuthForm from 'src/components/auth_form/auth_form.js'
 import BookmarkTimeline from 'src/components/bookmark_timeline/bookmark_timeline.vue'
 import BubbleTimeline from 'src/components/bubble_timeline/bubble_timeline.vue'
 import ConversationPage from 'src/components/conversation-page/conversation-page.vue'
@@ -11,7 +12,6 @@ import PublicTimeline from 'src/components/public_timeline/public_timeline.vue'
 import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
 import RemoteUserResolver from 'src/components/remote_user_resolver/remote_user_resolver.vue'
 import TagTimeline from 'src/components/tag_timeline/tag_timeline.vue'
-import AuthForm from 'src/components/auth_form/auth_form.js'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
diff --git a/src/components/global_error/global_error.js b/src/components/global_error/global_error.js
index 92edec2ba..b4768b8ad 100644
--- a/src/components/global_error/global_error.js
+++ b/src/components/global_error/global_error.js
@@ -6,7 +6,7 @@ import { useInterfaceStore } from 'src/stores/interface.js'
 const GlobalError = {
   components: {
     ErrorModal: defineAsyncComponent(
-      () => import('src/components/error_modal/error_modal.vue')
+      () => import('src/components/error_modal/error_modal.vue'),
     ),
   },
   computed: {

From 0ae83433df4f6f0e9e1c6d1130e2e8b3b429e62d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 10 Jul 2026 15:45:43 +0300
Subject: [PATCH 53/53] fix blur on notifs column

---
 src/components/notification/notification.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 39bd15426..381aef788 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -13,7 +13,7 @@
   <article
     v-else
     ref="root"
-    class="NotificationParent"
+    class="NotificationParent panel-body"
     :class="{ '-expandable': expandable }"
   >
     <div