From 79d02bddbe2b77574844b8ade7a09043c31b1c6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 13 Feb 2022 19:07:49 +0100
Subject: [PATCH 01/52] Birthdays
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/settings_modal/tabs/profile_tab.js  |  6 +++++-
 .../settings_modal/tabs/profile_tab.scss           |  5 +++++
 src/components/settings_modal/tabs/profile_tab.vue | 12 ++++++++++++
 src/components/user_profile/user_profile.js        | 11 +++++++++--
 src/components/user_profile/user_profile.vue       | 14 ++++++++++++++
 src/i18n/en.json                                   |  5 +++++
 src/i18n/pl.json                                   |  9 +++++++--
 .../entity_normalizer/entity_normalizer.service.js |  3 +++
 8 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 64079fcdd6..0ae95dbddb 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -29,6 +29,8 @@ const ProfileTab = {
       newLocked: this.$store.state.users.currentUser.locked,
       newNoRichText: this.$store.state.users.currentUser.no_rich_text,
       newDefaultScope: this.$store.state.users.currentUser.default_scope,
+      newBirthday: this.$store.state.users.currentUser.birthday,
+      showBirthday: this.$store.state.users.currentUser.show_birthday,
       newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
       hideFollows: this.$store.state.users.currentUser.hide_follows,
       hideFollowers: this.$store.state.users.currentUser.hide_followers,
@@ -132,7 +134,9 @@ const ProfileTab = {
             allow_following_move: this.allowFollowingMove,
             hide_follows_count: this.hideFollowsCount,
             hide_followers_count: this.hideFollowersCount,
-            show_role: this.showRole
+            show_role: this.showRole,
+            birthday: this.newBirthday || null,
+            show_birthday: this.showBirthday
             /* eslint-enable camelcase */
           } }).then((user) => {
           this.newFields.splice(user.fields.length)
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 111eaed38e..242875112f 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -124,4 +124,9 @@
       padding: 0 0.5em;
     }
   }
+
+  .birthday-input {
+    display: block;
+    margin-bottom: 1em;
+  }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index bb3c301d5c..9b92056dfc 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -95,6 +95,18 @@
           {{ $t('settings.discoverable') }}
         </Checkbox>
       </p>
+      <div>
+        <p>{{ $t('settings.birthday.label') }}</p>
+        <input
+          id="birthday"
+          v-model="newBirthday"
+          type="date"
+          class="birthday-input"
+        >
+        <Checkbox v-model="showBirthday">
+          {{ $t('settings.birthday.show_birthday') }}
+        </Checkbox>
+      </div>
       <div v-if="maxFields > 0">
         <p>{{ $t('settings.profile_fields.label') }}</p>
         <div
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 7a47560916..05d5f0a6b6 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -7,13 +7,16 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import localeService from 'src/services/locale/locale.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faCircleNotch
+  faCircleNotch,
+  faBirthdayCake
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faCircleNotch
+  faCircleNotch,
+  faBirthdayCake
 )
 
 const FollowerList = withLoadMore({
@@ -75,6 +78,10 @@ const UserProfile = {
     },
     followersTabVisible () {
       return this.isUs || !this.user.hide_followers
+    },
+    formattedBirthday () {
+      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+      return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
     }
   },
   methods: {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 726216ff03..5e08319829 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -11,6 +11,16 @@
         :allow-zooming-avatar="true"
         rounded="top"
       />
+      <span
+        v-if="!!user.birthday"
+        class="user-birthday"
+      >
+        <FAIcon
+          class="fa-old-padding"
+          icon="birthday-cake"
+        />
+        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+      </span>
       <div
         v-if="user.fields_html && user.fields_html.length > 0"
         class="user-profile-fields"
@@ -138,6 +148,10 @@
   flex: 2;
   flex-basis: 500px;
 
+  .user-birthday {
+    margin: 0 0.75em 0.5em;
+  }
+
   .user-profile-fields {
     margin: 0 0.5em;
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 209fd18419..abdd57b5b6 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -399,6 +399,10 @@
       "name": "Label",
       "value": "Content"
     },
+    "birthday": {
+      "label": "Birthday",
+      "show_birthday": "Show my birthday"
+    },
     "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",
     "name_bio": "Name & bio",
@@ -774,6 +778,7 @@
     "hide_repeats": "Hide repeats",
     "show_repeats": "Show repeats",
     "bot": "Bot",
+    "birthday": "Born {birthday}",
     "admin_menu": {
       "moderation": "Moderation",
       "grant_admin": "Grant Admin",
diff --git a/src/i18n/pl.json b/src/i18n/pl.json
index 304a03491e..7cd31a0683 100644
--- a/src/i18n/pl.json
+++ b/src/i18n/pl.json
@@ -633,7 +633,11 @@
     "reply_visibility_following_short": "Pokazuj odpowiedzi obserwującym",
     "reply_visibility_self_short": "Pokazuj odpowiedzi tylko do mnie",
     "sensitive_by_default": "Domyślnie oznaczaj wpisy jako wrażliwe",
-    "hide_shoutbox": "Ukryj shoutbox instancji"
+    "hide_shoutbox": "Ukryj shoutbox instancji",
+    "birthday": {
+      "label": "Urodziny",
+      "show_birthday": "Pokazuj moją datę urodzenia"
+    }
   },
   "time": {
     "day": "{0} dzień",
@@ -770,7 +774,8 @@
     "highlight": {
       "disabled": "Bez wyróżnienia"
     },
-    "bot": "Bot"
+    "bot": "Bot",
+    "birthday": "Urodzony(-a) {birthday}"
   },
   "user_profile": {
     "timeline_title": "Oś czasu użytkownika",
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 7025d80324..86eb4c8044 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -118,6 +118,8 @@ export const parseUser = (data) => {
       } else {
         output.role = 'member'
       }
+
+      output.birthday = data.pleroma.birthday
     }
 
     if (data.source) {
@@ -128,6 +130,7 @@ export const parseUser = (data) => {
         output.no_rich_text = data.source.pleroma.no_rich_text
         output.show_role = data.source.pleroma.show_role
         output.discoverable = data.source.pleroma.discoverable
+        output.show_birthday = data.pleroma.show_birthday
       }
     }
 

From b7e93739656d225ed0a8854f357746b5291b6857 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 25 Jul 2022 15:38:05 -0400
Subject: [PATCH 02/52] Add support for multiple interface languages

---
 .../interface_language_switcher.vue           | 75 +++++++++++++++----
 .../settings_modal/tabs/profile_tab.js        |  4 +-
 src/i18n/messages.js                          | 26 ++++++-
 src/modules/config.js                         |  5 +-
 src/services/locale/locale.service.js         |  5 ++
 5 files changed, 92 insertions(+), 23 deletions(-)

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 6997f149b3..e18a2a1202 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,21 +1,39 @@
 <template>
-  <div>
-    <label for="interface-language-switcher">
+  <div class="interface-language-switcher">
+    <label>
       {{ promptText }}
     </label>
-    {{ ' ' }}
-    <Select
-      id="interface-language-switcher"
-      v-model="controlledLanguage"
-    >
-      <option
-        v-for="lang in languages"
-        :key="lang.code"
-        :value="lang.code"
+    <ol>
+      <li
+        v-for="index of controlledLanguage.keys()"
+        :key="index"
       >
-        {{ lang.name }}
-      </option>
-    </Select>
+        <Select
+          class="language-select"
+          :model-value="controlledLanguage[index]"
+          @update:modelValue="val => setLanguageAt(index, val)"
+        >
+          <option
+            v-for="lang in languages"
+            :key="lang.code"
+            :value="lang.code"
+          >
+            {{ lang.name }}
+          </option>
+        </Select>
+        <button
+          v-if="controlledLanguage.length > 1"
+          class="button-default btn"
+          @click="() => removeLanguageAt(index)"
+        >{{ $t('settings.remove_language') }}</button>
+      </li>
+      <li>
+        <button
+          class="button-default btn"
+          @click="addLanguage"
+        >{{ $t('settings.add_language') }}</button>
+      </li>
+    </ol>
   </div>
 </template>
 
@@ -34,7 +52,7 @@ export default {
       required: true
     },
     language: {
-      type: String,
+      type: [Array, String],
       required: true
     },
     setLanguage: {
@@ -48,7 +66,9 @@ export default {
     },
 
     controlledLanguage: {
-      get: function () { return this.language },
+      get: function () {
+        return Array.isArray(this.language) ? this.language : [this.language]
+      },
       set: function (val) {
         this.setLanguage(val)
       }
@@ -58,7 +78,30 @@ export default {
   methods: {
     getLanguageName (code) {
       return localeService.getLanguageName(code)
+    },
+    addLanguage () {
+      this.controlledLanguage = [...this.controlledLanguage, '']
+    },
+    setLanguageAt (index, val) {
+      const lang = [...this.controlledLanguage]
+      lang[index] = val
+      this.controlledLanguage = lang
+    },
+    removeLanguageAt (index) {
+      const lang = [...this.controlledLanguage]
+      lang.splice(index, 1)
+      this.controlledLanguage = lang
     }
   }
 }
 </script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.interface-language-switcher {
+  .language-select {
+    margin-right: 1em;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index b86faef0e7..d59774613b 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -43,7 +43,7 @@ const ProfileTab = {
       bannerPreview: null,
       background: null,
       backgroundPreview: null,
-      emailLanguage: this.$store.state.users.currentUser.language || ''
+      emailLanguage: this.$store.state.users.currentUser.language || ['']
     }
   },
   components: {
@@ -130,7 +130,7 @@ const ProfileTab = {
       }
 
       if (this.emailLanguage) {
-        params.language = localeService.internalToBackendLocale(this.emailLanguage)
+        params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
       }
 
       this.$store.state.api.backendInteractor
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index 74a89ca879..849d98fd3e 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -7,8 +7,11 @@
 // sed -i -e "s/'//gm" -e 's/"/\\"/gm' -re 's/^( +)(.+?): ((.+?))?(,?)(\{?)$/\1"\2": "\4"/gm' -e 's/\"\{\"/{/g' -e 's/,"$/",/g' file.json
 // There's only problem that apostrophe character ' gets replaced by \\ so you have to fix it manually, sorry.
 
+import { isEqual } from 'lodash'
 import { languages, langCodeToJsonName } from './languages.js'
 
+const ULTIMATE_FALLBACK_LOCALE = 'en'
+
 const hasLanguageFile = (code) => languages.includes(code)
 
 const loadLanguageFile = (code) => {
@@ -25,11 +28,26 @@ const messages = {
     en: require('./en.json').default
   },
   setLanguage: async (i18n, language) => {
-    if (hasLanguageFile(language)) {
-      const messages = await loadLanguageFile(language)
-      i18n.setLocaleMessage(language, messages.default)
+    const languages = (Array.isArray(language) ? language : [language]).filter(k => k)
+
+    if (!languages.includes(ULTIMATE_FALLBACK_LOCALE)) {
+      languages.push(ULTIMATE_FALLBACK_LOCALE)
     }
-    i18n.locale = language
+    const [first, ...rest] = languages
+
+    if (first === i18n.locale && isEqual(rest, i18n.fallbackLocale)) {
+      return
+    }
+
+    for (const lang of languages) {
+      if (hasLanguageFile(lang)) {
+        const messages = await loadLanguageFile(lang)
+        i18n.setLocaleMessage(lang, messages.default)
+      }
+    }
+
+    i18n.fallbackLocale = rest
+    i18n.locale = first
   }
 }
 
diff --git a/src/modules/config.js b/src/modules/config.js
index 3cd6888f07..1a0e0fc8f0 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -184,7 +184,10 @@ const config = {
         case 'interfaceLanguage':
           messages.setLanguage(this.getters.i18n, value)
           dispatch('loadUnicodeEmojiData', value)
-          Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value))
+          Cookies.set(
+            BACKEND_LANGUAGE_COOKIE_NAME,
+            localeService.internalToBackendLocaleMulti(value)
+          )
           break
         case 'thirdColumnMode':
           dispatch('setLayoutWidth', undefined)
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index d33897851f..a4af8b90f4 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -11,6 +11,10 @@ const specialLanguageCodes = {
 const internalToBrowserLocale = code => specialLanguageCodes[code] || code
 
 const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_', '-')
+const internalToBackendLocaleMulti = codes => {
+  const langs = Array.isArray(codes) ? codes : [codes]
+  return langs.map(internalToBackendLocale).join(',')
+}
 
 const getLanguageName = (code) => {
   const specialLanguageNames = {
@@ -28,6 +32,7 @@ const languages = _.map(languagesObject.languages, (code) => ({ code, name: getL
 const localeService = {
   internalToBrowserLocale,
   internalToBackendLocale,
+  internalToBackendLocaleMulti,
   languages,
   getLanguageName
 }

From 52eef2eed1767cd4061d1c3c94475429b2924952 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 25 Jul 2022 15:38:31 -0400
Subject: [PATCH 03/52] Add English translations for multiple interface
 languages

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

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 59ee1c1722..9abfae67e8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -334,6 +334,8 @@
     "select_all": "Select all"
   },
   "settings": {
+    "add_language": "Add another language",
+    "remove_language": "Remove",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",

From 7e2ae2ba9565a58944fe8915f054f8eef812ee54 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 23 Dec 2022 23:02:21 -0500
Subject: [PATCH 04/52] Optimize UI

---
 .../interface_language_switcher.vue           | 37 +++++++++++--------
 src/i18n/en.json                              |  4 +-
 src/modules/instance.js                       |  9 ++++-
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index e18a2a1202..c9e7506b17 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -3,29 +3,34 @@
     <label>
       {{ promptText }}
     </label>
-    <ol>
+    <ul class="setting-list">
       <li
         v-for="index of controlledLanguage.keys()"
         :key="index"
       >
-        <Select
-          class="language-select"
-          :model-value="controlledLanguage[index]"
-          @update:modelValue="val => setLanguageAt(index, val)"
-        >
-          <option
-            v-for="lang in languages"
-            :key="lang.code"
-            :value="lang.code"
+        <label>
+          {{ index === 0 ? $t('settings.primary_language') : $tc('settings.fallback_language', index, { index }) }}
+          <Select
+            class="language-select"
+            :model-value="controlledLanguage[index]"
+            @update:modelValue="val => setLanguageAt(index, val)"
           >
-            {{ lang.name }}
-          </option>
-        </Select>
+            <option
+              v-for="lang in languages"
+              :key="lang.code"
+              :value="lang.code"
+            >
+              {{ lang.name }}
+            </option>
+          </Select>
+        </label>
         <button
-          v-if="controlledLanguage.length > 1"
+          v-if="controlledLanguage.length > 1 && index !== 0"
           class="button-default btn"
           @click="() => removeLanguageAt(index)"
-        >{{ $t('settings.remove_language') }}</button>
+        >
+          {{ $t('settings.remove_language') }}
+        </button>
       </li>
       <li>
         <button
@@ -33,7 +38,7 @@
           @click="addLanguage"
         >{{ $t('settings.add_language') }}</button>
       </li>
-    </ol>
+    </ul>
   </div>
 </template>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9abfae67e8..7df42d92cc 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -334,8 +334,10 @@
     "select_all": "Select all"
   },
   "settings": {
-    "add_language": "Add another language",
+    "add_language": "Add fallback language",
     "remove_language": "Remove",
+    "primary_language": "Primary language:",
+    "fallback_language": "Fallback language {index}:",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 3b15e62e36..bff261519c 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -273,8 +273,13 @@ const instance = {
         langList
           .map(async lang => {
             if (!state.unicodeEmojiAnnotations[lang]) {
-              const annotations = await loadAnnotations(lang)
-              commit('setUnicodeEmojiAnnotations', { lang, annotations })
+              try {
+                const annotations = await loadAnnotations(lang)
+                commit('setUnicodeEmojiAnnotations', { lang, annotations })
+              } catch (e) {
+                console.warn(`Error loading unicode emoji annotations for ${lang}: `, e)
+                // ignore
+              }
             }
           }))
     },

From 3ad5df805e22ddd473fdaa9a92df335a61fad7fc Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:04:53 -0500
Subject: [PATCH 05/52] Add delete status confirm modal

---
 src/components/extra_buttons/extra_buttons.js | 31 +++++++++++++++----
 .../extra_buttons/extra_buttons.vue           | 10 ++++++
 src/modules/config.js                         |  6 ++++
 src/modules/instance.js                       |  6 ++++
 4 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 3dc968c981..b1458d308e 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,4 +1,5 @@
 import Popover from '../popover/popover.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisH,
@@ -32,10 +33,14 @@ library.add(
 
 const ExtraButtons = {
   props: ['status'],
-  components: { Popover },
+  components: {
+    Popover,
+    ConfirmModal
+  },
   data () {
     return {
-      expanded: false
+      expanded: false,
+      showingDeleteDialog: false
     }
   },
   methods: {
@@ -46,11 +51,22 @@ const ExtraButtons = {
       this.expanded = false
     },
     deleteStatus () {
-      const confirmed = window.confirm(this.$t('status.delete_confirm'))
-      if (confirmed) {
-        this.$store.dispatch('deleteStatus', { id: this.status.id })
+      if (this.shouldConfirmDelete) {
+        this.showDeleteStatusConfirmDialog()
+      } else {
+        this.doDeleteStatus()
       }
     },
+    doDeleteStatus () {
+      this.$store.dispatch('deleteStatus', { id: this.status.id })
+      hideDeleteStatusConfirmDialog()
+    },
+    showDeleteStatusConfirmDialog () {
+      this.showingDeleteDialog = true
+    },
+    hideDeleteStatusConfirmDialog () {
+      this.showingDeleteDialog = false
+    },
     pinStatus () {
       this.$store.dispatch('pinStatus', this.status.id)
         .then(() => this.$emit('onSuccess'))
@@ -133,7 +149,10 @@ const ExtraButtons = {
     isEdited () {
       return this.status.edited_at !== null
     },
-    editingAvailable () { return this.$store.state.instance.editingAvailable }
+    editingAvailable () { return this.$store.state.instance.editingAvailable },
+    shouldConfirmDelete () {
+      return this.$store.getters.mergedConfig.modalOnDelete
+    }
   }
 }
 
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a84d47f60d..293f6d68ba 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -165,6 +165,16 @@
           />
         </FALayers>
       </span>
+      <ConfirmModal
+        :showing="showingDeleteDialog"
+        :title="$t('status.delete_confirm_title')"
+        :cancel-text="$t('status.delete_confirm_cancel_button')"
+        :confirm-text="$t('status.delete_confirm_accept_button')"
+        @cancelled="hideDeleteStatusConfirmDialog"
+        @accepted="doDeleteStatus"
+      >
+        {{ $t('status.delete_confirm') }}
+      </ConfirmModal>
     </template>
   </Popover>
 </template>
diff --git a/src/modules/config.js b/src/modules/config.js
index 3cd6888f07..a894903053 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -78,6 +78,12 @@ export const defaultState = {
   minimalScopesMode: undefined, // instance default
   // This hides statuses filtered via a word filter
   hideFilteredStatuses: undefined, // instance default
+  modalOnRepeat: undefined, // instance default
+  modalOnUnfollow: undefined, // instance default
+  modalOnBlock: undefined, // instance default
+  modalOnMute: undefined, // instance default
+  modalOnDelete: undefined, // instance default
+  modalOnLogout: undefined, // instance default
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 8e8d13d3cc..6fc3830c8e 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -71,6 +71,12 @@ const defaultState = {
   hideSitename: false,
   hideUserStats: false,
   muteBotStatuses: false,
+  modalOnRepeat: false,
+  modalOnUnfollow: false,
+  modalOnBlock: true,
+  modalOnMute: false,
+  modalOnDelete: true,
+  modalOnLogout: true,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',

From 1e352fbfacddc205397153bf5087484d550129e6 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:05:21 -0500
Subject: [PATCH 06/52] Add English translations for delete status confirm
 modal

---
 src/components/extra_buttons/extra_buttons.js | 2 +-
 src/i18n/en.json                              | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index b1458d308e..48b960b2b7 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -59,7 +59,7 @@ const ExtraButtons = {
     },
     doDeleteStatus () {
       this.$store.dispatch('deleteStatus', { id: this.status.id })
-      hideDeleteStatusConfirmDialog()
+      this.hideDeleteStatusConfirmDialog()
     },
     showDeleteStatusConfirmDialog () {
       this.showingDeleteDialog = true
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1ee1147ad3..b2bec6920e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -852,6 +852,9 @@
     "bookmark": "Bookmark",
     "unbookmark": "Unbookmark",
     "delete_confirm": "Do you really want to delete this status?",
+    "delete_confirm_title": "Delete confirmation",
+    "delete_confirm_accept_button": "Delete",
+    "delete_confirm_cancel_button": "Keep",
     "reply_to": "Reply to",
     "mentions": "Mentions",
     "replies_list": "Replies:",

From 1ff2948aeb485ef48a4add6310ba8fb9d43d262c Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:17:06 -0500
Subject: [PATCH 07/52] Add setting entries for whether to show confirmation
 dialogs

---
 .../settings_modal/tabs/general_tab.vue       | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 582cb2884f..906c37584e 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -148,6 +148,41 @@
             </SizeSetting>
           </div>
         </li>
+        <li class="select-multiple">
+          <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
+          <ul class="option-list">
+            <li>
+              <BooleanSetting path="modalOnRepeat">
+                {{ $t('settings.confirm_dialogs_repeat') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnUnfollow">
+                {{ $t('settings.confirm_dialogs_unfollow') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnBlock">
+                {{ $t('settings.confirm_dialogs_block') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnMute">
+                {{ $t('settings.confirm_dialogs_mute') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnDelete">
+                {{ $t('settings.confirm_dialogs_delete') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnLogout">
+                {{ $t('settings.confirm_dialogs_logout') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
       </ul>
     </div>
     <div class="setting-item">

From f8b522e36dd08a08cd7071c30b5e4e61832275aa Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:17:49 -0500
Subject: [PATCH 08/52] Add English translations for setting entries

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

diff --git a/src/i18n/en.json b/src/i18n/en.json
index b2bec6920e..ed21e2a5d9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -416,6 +416,13 @@
     "composing": "Composing",
     "confirm_new_password": "Confirm new password",
     "current_password": "Current password",
+    "confirm_dialogs": "Ask for confirmation when",
+    "confirm_dialogs_repeat": "repeating a status",
+    "confirm_dialogs_unfollow": "unfollowing a user",
+    "confirm_dialogs_block": "blocking a user",
+    "confirm_dialogs_mute": "muting a user",
+    "confirm_dialogs_delete": "deleting a status",
+    "confirm_dialogs_logout": "logging out",
     "mutes_and_blocks": "Mutes and Blocks",
     "data_import_export_tab": "Data import / export",
     "default_vis": "Default visibility scope",

From 4d175235f1bc72c369c5e5fc8ed1997b384c0b83 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:49:39 -0500
Subject: [PATCH 09/52] Add confirmation for repeating

---
 .../retweet_button/retweet_button.js          | 24 ++++++++++++++++++-
 .../retweet_button/retweet_button.vue         | 10 ++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 4d92b5fa75..198b6c14b9 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -1,3 +1,4 @@
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faRetweet,
@@ -15,13 +16,24 @@ library.add(
 
 const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],
+  components: {
+    ConfirmModal
+  },
   data () {
     return {
-      animated: false
+      animated: false,
+      showingConfirmDialog: false
     }
   },
   methods: {
     retweet () {
+      if (!this.status.repeated && this.shouldConfirmRepeat) {
+        this.showConfirmDialog()
+      } else {
+        this.doRetweet()
+      }
+    },
+    doRetweet () {
       if (!this.status.repeated) {
         this.$store.dispatch('retweet', { id: this.status.id })
       } else {
@@ -31,6 +43,13 @@ const RetweetButton = {
       setTimeout(() => {
         this.animated = false
       }, 500)
+      this.hideConfirmDialog()
+    },
+    showConfirmDialog () {
+      this.showingConfirmDialog = true
+    },
+    hideConfirmDialog () {
+      this.showingConfirmDialog = false
     }
   },
   computed: {
@@ -39,6 +58,9 @@ const RetweetButton = {
     },
     remoteInteractionLink () {
       return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+    },
+    shouldConfirmRepeat () {
+      return this.mergedConfig.modalOnRepeat
     }
   }
 }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 7700ee0d56..38d4dc3fef 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -59,6 +59,16 @@
     >
       {{ status.repeat_num }}
     </span>
+    <confirm-modal
+      :showing="showingConfirmDialog"
+      :title="$t('status.repeat_confirm_title')"
+      :confirm-text="$t('status.repeat_confirm_accept_button')"
+      :cancel-text="$t('status.repeat_confirm_cancel_button')"
+      @accepted="doRetweet"
+      @cancelled="hideConfirmDialog"
+    >
+      {{ $t('status.repeat_confirm') }}
+    </confirm-modal>
   </div>
 </template>
 

From a0b886459bf5e146b8b7654d97ba8838bfac29de Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:50:04 -0500
Subject: [PATCH 10/52] Add confirmation for following

---
 src/components/follow_button/follow_button.js | 25 +++++++++++-
 .../follow_button/follow_button.vue           | 38 ++++++++++++++-----
 2 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
index 3edbcb86fb..0a74a7a105 100644
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@@ -1,12 +1,20 @@
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
   props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
+  components: {
+    ConfirmModal
+  },
   data () {
     return {
-      inProgress: false
+      inProgress: false,
+      showingConfirmUnfollow: false,
     }
   },
   computed: {
+    shouldConfirmUnfollow () {
+      return this.$store.getters.mergedConfig.modalOnUnfollow
+    },
     isPressed () {
       return this.inProgress || this.relationship.following
     },
@@ -35,6 +43,12 @@ export default {
     }
   },
   methods: {
+    showConfirmUnfollow () {
+      this.showingConfirmUnfollow = true
+    },
+    hideConfirmUnfollow () {
+      this.showingConfirmUnfollow = false
+    },
     onClick () {
       this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
     },
@@ -45,12 +59,21 @@ export default {
       })
     },
     unfollow () {
+      if (this.shouldConfirmUnfollow) {
+        this.showConfirmUnfollow()
+      } else {
+        this.doUnfollow()
+      }
+    },
+    doUnfollow () {
       const store = this.$store
       this.inProgress = true
       requestUnfollow(this.relationship.id, store).then(() => {
         this.inProgress = false
         store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
       })
+
+      this.hideConfirmUnfollow()
     }
   }
 }
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index 965d5256a6..4fc2233a6b 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -1,13 +1,33 @@
 <template>
-  <button
-    class="btn button-default follow-button"
-    :class="{ toggled: isPressed }"
-    :disabled="disabled"
-    :title="title"
-    @click="onClick"
-  >
-    {{ label }}
-  </button>
+  <div>
+    <button
+      class="btn button-default follow-button"
+      :class="{ toggled: isPressed }"
+      :disabled="disabled"
+      :title="title"
+      @click="onClick"
+    >
+      {{ label }}
+    </button>
+    <confirm-modal
+      :showing="showingConfirmUnfollow"
+      :title="$t('user_card.unfollow_confirm_title')"
+      :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
+      :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
+      @accepted="doUnfollow"
+      @cancelled="hideConfirmUnfollow"
+    >
+      <i18n
+        path="user_card.unfollow_confirm"
+        tag="span"
+      >
+        <span
+          place="user"
+          v-text="user.screen_name_ui"
+        />
+      </i18n>
+    </confirm-modal>
+  </div>
 </template>
 
 <script src="./follow_button.js"></script>

From 0684f19d1b903a7d941aa7cfa366044b98d97659 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:50:25 -0500
Subject: [PATCH 11/52] Add ConfirmModal comp

---
 src/components/confirm_modal/confirm_modal.js | 42 +++++++++++++++++++
 .../confirm_modal/confirm_modal.vue           | 28 +++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/components/confirm_modal/confirm_modal.js
 create mode 100644 src/components/confirm_modal/confirm_modal.vue

diff --git a/src/components/confirm_modal/confirm_modal.js b/src/components/confirm_modal/confirm_modal.js
new file mode 100644
index 0000000000..bb5e9d979d
--- /dev/null
+++ b/src/components/confirm_modal/confirm_modal.js
@@ -0,0 +1,42 @@
+import DialogModal from '../dialog_modal/dialog_modal.vue'
+
+/**
+ * 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 ConfirmModal = {
+  components: {
+    DialogModal
+  },
+  data: {
+  },
+  props: {
+    showing: {
+      type: Boolean
+    },
+    title: {
+      type: String
+    },
+    cancelText: {
+      type: String
+    },
+    confirmText: {
+      type: String
+    }
+  },
+  computed: {
+  },
+  methods: {
+    onCancel () {
+      this.$emit('cancelled')
+    },
+    onAccept () {
+      this.$emit('accepted')
+    }
+  }
+}
+
+export default ConfirmModal
diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
new file mode 100644
index 0000000000..250a6984bb
--- /dev/null
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -0,0 +1,28 @@
+<template>
+  <dialog-modal
+    v-if="showing"
+    :onCancel="onCancel"
+  >
+    <template v-slot:header>
+      <span v-text="title"></span>
+    </template>
+
+    <slot></slot>
+
+    <template v-slot:footer>
+      <button
+        class="btn button-default"
+        v-text="confirmText"
+        @click.prevent="onAccept"
+      ></button>
+
+      <button
+        class="btn button-default"
+        v-text="cancelText"
+        @click.prevent="onCancel"
+      ></button>
+    </template>
+  </dialog-modal>
+</template>
+
+<script src="./confirm_modal.js"></script>

From a0c6d642af277954585b32724de4f2b157b02e42 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:08:47 -0500
Subject: [PATCH 12/52] Add English translations for repeat and unfollow
 confirmation

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

diff --git a/src/i18n/en.json b/src/i18n/en.json
index ed21e2a5d9..7e23a849d5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -850,6 +850,10 @@
   "status": {
     "favorites": "Favorites",
     "repeats": "Repeats",
+    "repeat_confirm": "Do you really want to repeat this status?",
+    "repeat_confirm_title": "Repeat confirmation",
+    "repeat_confirm_accept_button": "Repeat",
+    "repeat_confirm_cancel_button": "Do not repeat",
     "delete": "Delete status",
     "edit": "Edit status",
     "edited_at": "(last edited {time})",
@@ -919,6 +923,10 @@
     "follow_sent": "Request sent!",
     "follow_progress": "Requesting…",
     "follow_unfollow": "Unfollow",
+    "unfollow_confirm_title": "Unfollow confirmation",
+    "unfollow_confirm": "Do you really want to unfollow {user}?",
+    "unfollow_confirm_accept_button": "Unfollow",
+    "unfollow_confirm_cancel_button": "Do not unfollow",
     "followees": "Following",
     "followers": "Followers",
     "following": "Following!",

From e7e35ead09589e1673dd6b6fdd24f7679ef108bf Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:21:19 -0500
Subject: [PATCH 13/52] Add confirmation for muting

---
 src/components/user_card/user_card.js  | 24 ++++++++++++++++++++++--
 src/components/user_card/user_card.vue | 18 ++++++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 6787930724..1bcc434100 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -8,6 +8,7 @@ import UserNote from '../user_note/user_note.vue'
 import Select from '../select/select.vue'
 import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -46,7 +47,8 @@ export default {
   data () {
     return {
       followRequestInProgress: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+      showingConfirmMute: false
     }
   },
   created () {
@@ -137,6 +139,9 @@ export default {
     supportsNote () {
       return 'note' in this.relationship
     },
+    shouldConfirmMute () {
+      return this.mergedConfig.modalOnMute
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
@@ -149,11 +154,26 @@ export default {
     Select,
     RichContent,
     UserLink,
-    UserNote
+    UserNote,
+    ConfirmModal
   },
   methods: {
+    showConfirmMute () {
+      this.showingConfirmMute = true
+    },
+    hideConfirmMute () {
+      this.showingConfirmMute = false
+    },
     muteUser () {
+      if (!this.shouldConfirmMute) {
+        this.doMuteUser()
+      } else {
+        this.showConfirmMute()
+      }
+    },
+    doMuteUser () {
       this.$store.dispatch('muteUser', this.user.id)
+      this.hideConfirmMute()
     },
     unmuteUser () {
       this.$store.dispatch('unmuteUser', this.user.id)
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 349c7cb160..fac900a983 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -314,6 +314,24 @@
         :handle-links="true"
       />
     </div>
+    <confirm-modal
+      :showing="showingConfirmMute"
+      :title="$t('user_card.mute_confirm_title')"
+      :confirm-text="$t('user_card.mute_confirm_accept_button')"
+      :cancel-text="$t('user_card.mute_confirm_cancel_button')"
+      @accepted="doMuteUser"
+      @cancelled="hideConfirmMute"
+    >
+      <i18n
+        path="user_card.mute_confirm"
+        tag="span"
+      >
+        <span
+          place="user"
+          v-text="user.screen_name_ui"
+        />
+      </i18n>
+    </confirm-modal>
   </div>
 </template>
 

From c032b48219ba601df5dabc7fd271444fe7db0321 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:21:30 -0500
Subject: [PATCH 14/52] Add English translation for mute confirmation

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

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 7e23a849d5..fa359f88c1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -938,6 +938,10 @@
     "message": "Message",
     "mute": "Mute",
     "muted": "Muted",
+    "mute_confirm_title": "Mute confirmation",
+    "mute_confirm": "Do you really want to mute {user}?",
+    "mute_confirm_accept_button": "Mute",
+    "mute_confirm_cancel_button": "Do not mute",
     "per_day": "per day",
     "remote_follow": "Remote follow",
     "remove_follower": "Remove follower",

From 3b7aaae2b366abe1162c22a29918336c4210446f Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:26:30 -0500
Subject: [PATCH 15/52] Add confirmation for blocking

---
 .../account_actions/account_actions.js        | 25 +++++++++++++++++--
 .../account_actions/account_actions.vue       | 18 +++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index c23407f90e..7dec0c3d7c 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -2,6 +2,7 @@ import { mapState } from 'vuex'
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
 import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
@@ -16,14 +17,23 @@ const AccountActions = {
     'user', 'relationship'
   ],
   data () {
-    return { }
+    return {
+      showingConfirmBlock: false
+    }
   },
   components: {
     ProgressButton,
     Popover,
-    UserListMenu
+    UserListMenu,
+    ConfirmModal
   },
   methods: {
+    showConfirmBlock () {
+      this.showingConfirmBlock = true
+    },
+    hideConfirmBlock () {
+      this.showingConfirmBlock = false
+    },
     showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
     },
@@ -31,7 +41,15 @@ const AccountActions = {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
     blockUser () {
+      if (!this.shouldConfirmBlock) {
+        this.doBlockUser()
+      } else {
+        this.showConfirmBlock()
+      }
+    },
+    doBlockUser () {
       this.$store.dispatch('blockUser', this.user.id)
+      this.hideConfirmBlock()
     },
     unblockUser () {
       this.$store.dispatch('unblockUser', this.user.id)
@@ -50,6 +68,9 @@ const AccountActions = {
     }
   },
   computed: {
+    shouldConfirmBlock () {
+      return this.$store.getters.mergedConfig.modalOnBlock
+    },
     ...mapState({
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     })
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 973a5935c6..dfe1f706f2 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -74,6 +74,24 @@
         </button>
       </template>
     </Popover>
+    <confirm-modal
+      :showing="showingConfirmBlock"
+      :title="$t('user_card.block_confirm_title')"
+      :confirm-text="$t('user_card.block_confirm_accept_button')"
+      :cancel-text="$t('user_card.block_confirm_cancel_button')"
+      @accepted="doBlockUser"
+      @cancelled="hideConfirmBlock"
+    >
+      <i18n
+        path="user_card.block_confirm"
+        tag="span"
+      >
+        <span
+          place="user"
+          v-text="user.screen_name_ui"
+        />
+      </i18n>
+    </confirm-modal>
   </div>
 </template>
 

From 0bfe100ef77ca36e2789310b204987ea54ec2696 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:26:42 -0500
Subject: [PATCH 16/52] Add English translation for block confirmation

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

diff --git a/src/i18n/en.json b/src/i18n/en.json
index fa359f88c1..1dec4b9054 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -914,6 +914,10 @@
     "approve": "Approve",
     "block": "Block",
     "blocked": "Blocked!",
+    "block_confirm_title": "Block confirmation",
+    "block_confirm": "Do you really want to block {user}?",
+    "block_confirm_accept_button": "Block",
+    "block_confirm_cancel_button": "Do not block",
     "deactivated": "Deactivated",
     "deny": "Deny",
     "edit_profile": "Edit profile",

From c202c89ca0f8c9bc1957bff3bbe3ea39e21ddbba Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:51:13 -0500
Subject: [PATCH 17/52] Add confirmation for logout

---
 .../confirm_modal/confirm_modal.vue           |  1 +
 src/components/desktop_nav/desktop_nav.js     | 26 +++++++++++++++---
 src/components/desktop_nav/desktop_nav.vue    | 10 +++++++
 src/components/mobile_nav/mobile_nav.js       | 27 ++++++++++++++++---
 src/components/mobile_nav/mobile_nav.vue      | 18 +++++++++++++
 5 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 250a6984bb..fa354285df 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -1,6 +1,7 @@
 <template>
   <dialog-modal
     v-if="showing"
+    class="confirm-modal"
     :onCancel="onCancel"
   >
     <template v-slot:header>
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 08c0e44e25..745b1a8158 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -1,4 +1,5 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faSignInAlt,
@@ -30,7 +31,8 @@ library.add(
 
 export default {
   components: {
-    SearchBar
+    SearchBar,
+    ConfirmModal
   },
   data: () => ({
     searchBarHidden: true,
@@ -40,7 +42,8 @@ export default {
         window.CSS.supports('-moz-mask-size', 'contain') ||
         window.CSS.supports('-ms-mask-size', 'contain') ||
         window.CSS.supports('-o-mask-size', 'contain')
-    )
+    ),
+    showingConfirmLogout: false
   }),
   computed: {
     enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
@@ -73,15 +76,32 @@ export default {
     hideSitename () { return this.$store.state.instance.hideSitename },
     logoLeft () { return this.$store.state.instance.logoLeft },
     currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private }
+    privateMode () { return this.$store.state.instance.private },
+    shouldConfirmLogout () {
+      return this.$store.getters.mergedConfig.modalOnLogout
+    }
   },
   methods: {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
+    showConfirmLogout () {
+      this.showingConfirmLogout = true
+    },
+    hideConfirmLogout () {
+      this.showingConfirmLogout = false
+    },
     logout () {
+      if (!this.shouldConfirmLogout) {
+        this.doLogout()
+      } else {
+        this.showConfirmLogout()
+      }
+    },
+    doLogout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+      this.hideConfirmLogout()
     },
     onSearchBarToggled (hidden) {
       this.searchBarHidden = hidden
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 07bf8005c7..7db94a3777 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -76,6 +76,16 @@
         </button>
       </div>
     </div>
+    <confirm-modal
+      :showing="showingConfirmLogout"
+      :title="$t('login.mute_confirm_title')"
+      :confirm-text="$t('login.logout_confirm_accept_button')"
+      :cancel-text="$t('login.logout_confirm_cancel_button')"
+      @accepted="doLogout"
+      @cancelled="hideConfirmLogout"
+    >
+      {{ $t('login.logout_confirm') }}
+    </confirm-modal>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index cdbbb8127d..dad1f6aa32 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -1,5 +1,6 @@
 import SideDrawer from '../side_drawer/side_drawer.vue'
 import Notifications from '../notifications/notifications.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
@@ -25,12 +26,14 @@ const MobileNav = {
   components: {
     SideDrawer,
     Notifications,
-    NavigationPins
+    NavigationPins,
+    ConfirmModal
   },
   data: () => ({
     notificationsCloseGesture: undefined,
     notificationsOpen: false,
-    notificationsAtTop: true
+    notificationsAtTop: true,
+    showingConfirmLogout: false
   }),
   created () {
     this.notificationsCloseGesture = GestureService.swipeGesture(
@@ -57,7 +60,11 @@ const MobileNav = {
     ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount']),
     chatsPinned () {
       return new Set(this.$store.state.serverSideStorage.prefsStorage.collections.pinnedNavItems).has('chats')
-    }
+    },
+    shouldConfirmLogout () {
+      return this.$store.getters.mergedConfig.modalOnLogout
+    },
+    ...mapGetters(['unreadChatCount'])
   },
   methods: {
     toggleMobileSidebar () {
@@ -88,9 +95,23 @@ const MobileNav = {
     scrollMobileNotificationsToTop () {
       this.$refs.mobileNotifications.scrollTo(0, 0)
     },
+    showConfirmLogout () {
+      this.showingConfirmLogout = true
+    },
+    hideConfirmLogout () {
+      this.showingConfirmLogout = false
+    },
     logout () {
+      if (!this.shouldConfirmLogout) {
+        this.doLogout()
+      } else {
+        this.showConfirmLogout()
+      }
+    },
+    doLogout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+      this.hideConfirmLogout()
     },
     markNotificationsAsSeen () {
       // this.$refs.notifications.markAsSeen()
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index d6fe102cb4..de97624b42 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -88,6 +88,16 @@
       ref="sideDrawer"
       :logout="logout"
     />
+    <confirm-modal
+      :showing="showingConfirmLogout"
+      :title="$t('login.mute_confirm_title')"
+      :confirm-text="$t('login.logout_confirm_accept_button')"
+      :cancel-text="$t('login.logout_confirm_cancel_button')"
+      @accepted="doLogout"
+      @cancelled="hideConfirmLogout"
+    >
+      {{ $t('login.logout_confirm') }}
+    </confirm-modal>
   </div>
 </template>
 
@@ -235,6 +245,14 @@
       }
     }
   }
+  .confirm-modal.dark-overlay {
+    &::before {
+      z-index: 3000;
+    }
+    .dialog-modal.panel {
+      z-index: 3001;
+    }
+  }
 }
 
 </style>

From 5c048321e787b880f4c228e52b956b59edc3fc4f Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:51:32 -0500
Subject: [PATCH 18/52] Add English translation for logout confirmation

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

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1dec4b9054..f7d83aa324 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -137,6 +137,10 @@
     "login": "Log in",
     "description": "Log in with OAuth",
     "logout": "Log out",
+    "logout_confirm_title": "Logout confirmation",
+    "logout_confirm": "Do you really want to logout?",
+    "logout_confirm_accept_button": "Logout",
+    "logout_confirm_cancel_button": "Do not logout",
     "password": "Password",
     "placeholder": "e.g. lain",
     "register": "Register",

From 8c8a8232c8c23f706b82c03c7ddadbd94ca2f3df Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 17:03:17 -0500
Subject: [PATCH 19/52] Lint

---
 src/components/confirm_modal/confirm_modal.vue | 14 +++++++-------
 src/components/follow_button/follow_button.js  |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index fa354285df..59e46dc185 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -2,26 +2,26 @@
   <dialog-modal
     v-if="showing"
     class="confirm-modal"
-    :onCancel="onCancel"
+    :on-cancel="onCancel"
   >
     <template v-slot:header>
-      <span v-text="title"></span>
+      <span v-text="title" />
     </template>
 
-    <slot></slot>
+    <slot />
 
     <template v-slot:footer>
       <button
         class="btn button-default"
-        v-text="confirmText"
         @click.prevent="onAccept"
-      ></button>
+        v-text="confirmText"
+      />
 
       <button
         class="btn button-default"
-        v-text="cancelText"
         @click.prevent="onCancel"
-      ></button>
+        v-text="cancelText"
+      />
     </template>
   </dialog-modal>
 </template>
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
index 0a74a7a105..443aa9bccc 100644
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@@ -8,7 +8,7 @@ export default {
   data () {
     return {
       inProgress: false,
-      showingConfirmUnfollow: false,
+      showingConfirmUnfollow: false
     }
   },
   computed: {

From 51ade260660b1a6586b5c0091d89c9701b684870 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 11 Feb 2022 10:18:20 -0500
Subject: [PATCH 20/52] Fix logout confirm dialog title

---
 src/components/desktop_nav/desktop_nav.vue | 2 +-
 src/components/mobile_nav/mobile_nav.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 7db94a3777..0f5b31363b 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -78,7 +78,7 @@
     </div>
     <confirm-modal
       :showing="showingConfirmLogout"
-      :title="$t('login.mute_confirm_title')"
+      :title="$t('login.logout_confirm_title')"
       :confirm-text="$t('login.logout_confirm_accept_button')"
       :cancel-text="$t('login.logout_confirm_cancel_button')"
       @accepted="doLogout"
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index de97624b42..0f23b7aceb 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -90,7 +90,7 @@
     />
     <confirm-modal
       :showing="showingConfirmLogout"
-      :title="$t('login.mute_confirm_title')"
+      :title="$t('login.logout_confirm_title')"
       :confirm-text="$t('login.logout_confirm_accept_button')"
       :cancel-text="$t('login.logout_confirm_cancel_button')"
       @accepted="doLogout"

From 39e4746f615970001839309e06a0f13d9613b175 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 17 Mar 2022 00:06:26 -0400
Subject: [PATCH 21/52] Use portal for modals

---
 .../account_actions/account_actions.vue       | 36 ++++++------
 src/components/confirm_modal/confirm_modal.js |  5 --
 .../confirm_modal/confirm_modal.vue           |  1 -
 src/components/desktop_nav/desktop_nav.vue    | 22 ++++----
 .../extra_buttons/extra_buttons.vue           | 22 ++++----
 .../follow_button/follow_button.vue           | 56 +++++++++----------
 src/components/mobile_nav/mobile_nav.vue      | 22 ++++----
 .../retweet_button/retweet_button.vue         | 22 ++++----
 src/components/user_card/user_card.vue        | 36 ++++++------
 9 files changed, 114 insertions(+), 108 deletions(-)

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index dfe1f706f2..273aac6985 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -74,24 +74,26 @@
         </button>
       </template>
     </Popover>
-    <confirm-modal
-      :showing="showingConfirmBlock"
-      :title="$t('user_card.block_confirm_title')"
-      :confirm-text="$t('user_card.block_confirm_accept_button')"
-      :cancel-text="$t('user_card.block_confirm_cancel_button')"
-      @accepted="doBlockUser"
-      @cancelled="hideConfirmBlock"
-    >
-      <i18n
-        path="user_card.block_confirm"
-        tag="span"
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmBlock"
+        :title="$t('user_card.block_confirm_title')"
+        :confirm-text="$t('user_card.block_confirm_accept_button')"
+        :cancel-text="$t('user_card.block_confirm_cancel_button')"
+        @accepted="doBlockUser"
+        @cancelled="hideConfirmBlock"
       >
-        <span
-          place="user"
-          v-text="user.screen_name_ui"
-        />
-      </i18n>
-    </confirm-modal>
+        <i18n
+          path="user_card.block_confirm"
+          tag="span"
+        >
+          <span
+            place="user"
+            v-text="user.screen_name_ui"
+          />
+        </i18n>
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 
diff --git a/src/components/confirm_modal/confirm_modal.js b/src/components/confirm_modal/confirm_modal.js
index bb5e9d979d..96ddc118fd 100644
--- a/src/components/confirm_modal/confirm_modal.js
+++ b/src/components/confirm_modal/confirm_modal.js
@@ -11,12 +11,7 @@ const ConfirmModal = {
   components: {
     DialogModal
   },
-  data: {
-  },
   props: {
-    showing: {
-      type: Boolean
-    },
     title: {
       type: String
     },
diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 59e46dc185..5b5014c5e1 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -1,6 +1,5 @@
 <template>
   <dialog-modal
-    v-if="showing"
     class="confirm-modal"
     :on-cancel="onCancel"
   >
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 0f5b31363b..186303853a 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -76,16 +76,18 @@
         </button>
       </div>
     </div>
-    <confirm-modal
-      :showing="showingConfirmLogout"
-      :title="$t('login.logout_confirm_title')"
-      :confirm-text="$t('login.logout_confirm_accept_button')"
-      :cancel-text="$t('login.logout_confirm_cancel_button')"
-      @accepted="doLogout"
-      @cancelled="hideConfirmLogout"
-    >
-      {{ $t('login.logout_confirm') }}
-    </confirm-modal>
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmLogout"
+        :title="$t('login.logout_confirm_title')"
+        :confirm-text="$t('login.logout_confirm_accept_button')"
+        :cancel-text="$t('login.logout_confirm_cancel_button')"
+        @accepted="doLogout"
+        @cancelled="hideConfirmLogout"
+      >
+        {{ $t('login.logout_confirm') }}
+      </confirm-modal>
+    </portal>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 293f6d68ba..4641947a1a 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -165,16 +165,18 @@
           />
         </FALayers>
       </span>
-      <ConfirmModal
-        :showing="showingDeleteDialog"
-        :title="$t('status.delete_confirm_title')"
-        :cancel-text="$t('status.delete_confirm_cancel_button')"
-        :confirm-text="$t('status.delete_confirm_accept_button')"
-        @cancelled="hideDeleteStatusConfirmDialog"
-        @accepted="doDeleteStatus"
-      >
-        {{ $t('status.delete_confirm') }}
-      </ConfirmModal>
+      <portal to="modal">
+        <ConfirmModal
+          v-if="showingDeleteDialog"
+          :title="$t('status.delete_confirm_title')"
+          :cancel-text="$t('status.delete_confirm_cancel_button')"
+          :confirm-text="$t('status.delete_confirm_accept_button')"
+          @cancelled="hideDeleteStatusConfirmDialog"
+          @accepted="doDeleteStatus"
+        >
+          {{ $t('status.delete_confirm') }}
+        </ConfirmModal>
+      </portal>
     </template>
   </Popover>
 </template>
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index 4fc2233a6b..5c7994062b 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -1,33 +1,33 @@
 <template>
-  <div>
-    <button
-      class="btn button-default follow-button"
-      :class="{ toggled: isPressed }"
-      :disabled="disabled"
-      :title="title"
-      @click="onClick"
-    >
-      {{ label }}
-    </button>
-    <confirm-modal
-      :showing="showingConfirmUnfollow"
-      :title="$t('user_card.unfollow_confirm_title')"
-      :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
-      :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
-      @accepted="doUnfollow"
-      @cancelled="hideConfirmUnfollow"
-    >
-      <i18n
-        path="user_card.unfollow_confirm"
-        tag="span"
+  <button
+    class="btn button-default follow-button"
+    :class="{ toggled: isPressed }"
+    :disabled="disabled"
+    :title="title"
+    @click="onClick"
+  >
+    {{ label }}
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmUnfollow"
+        :title="$t('user_card.unfollow_confirm_title')"
+        :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
+        :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
+        @accepted="doUnfollow"
+        @cancelled="hideConfirmUnfollow"
       >
-        <span
-          place="user"
-          v-text="user.screen_name_ui"
-        />
-      </i18n>
-    </confirm-modal>
-  </div>
+        <i18n
+          path="user_card.unfollow_confirm"
+          tag="span"
+        >
+          <span
+            place="user"
+            v-text="user.screen_name_ui"
+          />
+        </i18n>
+      </confirm-modal>
+    </portal>
+  </button>
 </template>
 
 <script src="./follow_button.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 0f23b7aceb..6b6b8f21a8 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -88,16 +88,18 @@
       ref="sideDrawer"
       :logout="logout"
     />
-    <confirm-modal
-      :showing="showingConfirmLogout"
-      :title="$t('login.logout_confirm_title')"
-      :confirm-text="$t('login.logout_confirm_accept_button')"
-      :cancel-text="$t('login.logout_confirm_cancel_button')"
-      @accepted="doLogout"
-      @cancelled="hideConfirmLogout"
-    >
-      {{ $t('login.logout_confirm') }}
-    </confirm-modal>
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmLogout"
+        :title="$t('login.logout_confirm_title')"
+        :confirm-text="$t('login.logout_confirm_accept_button')"
+        :cancel-text="$t('login.logout_confirm_cancel_button')"
+        @accepted="doLogout"
+        @cancelled="hideConfirmLogout"
+      >
+        {{ $t('login.logout_confirm') }}
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 38d4dc3fef..9ed24bd534 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -59,16 +59,18 @@
     >
       {{ status.repeat_num }}
     </span>
-    <confirm-modal
-      :showing="showingConfirmDialog"
-      :title="$t('status.repeat_confirm_title')"
-      :confirm-text="$t('status.repeat_confirm_accept_button')"
-      :cancel-text="$t('status.repeat_confirm_cancel_button')"
-      @accepted="doRetweet"
-      @cancelled="hideConfirmDialog"
-    >
-      {{ $t('status.repeat_confirm') }}
-    </confirm-modal>
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmDialog"
+        :title="$t('status.repeat_confirm_title')"
+        :confirm-text="$t('status.repeat_confirm_accept_button')"
+        :cancel-text="$t('status.repeat_confirm_cancel_button')"
+        @accepted="doRetweet"
+        @cancelled="hideConfirmDialog"
+      >
+        {{ $t('status.repeat_confirm') }}
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index fac900a983..5a848ead5d 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -314,24 +314,26 @@
         :handle-links="true"
       />
     </div>
-    <confirm-modal
-      :showing="showingConfirmMute"
-      :title="$t('user_card.mute_confirm_title')"
-      :confirm-text="$t('user_card.mute_confirm_accept_button')"
-      :cancel-text="$t('user_card.mute_confirm_cancel_button')"
-      @accepted="doMuteUser"
-      @cancelled="hideConfirmMute"
-    >
-      <i18n
-        path="user_card.mute_confirm"
-        tag="span"
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmMute"
+        :title="$t('user_card.mute_confirm_title')"
+        :confirm-text="$t('user_card.mute_confirm_accept_button')"
+        :cancel-text="$t('user_card.mute_confirm_cancel_button')"
+        @accepted="doMuteUser"
+        @cancelled="hideConfirmMute"
       >
-        <span
-          place="user"
-          v-text="user.screen_name_ui"
-        />
-      </i18n>
-    </confirm-modal>
+        <i18n
+          path="user_card.mute_confirm"
+          tag="span"
+        >
+          <span
+            place="user"
+            v-text="user.screen_name_ui"
+          />
+        </i18n>
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 

From dc04c8cbd48dd8dcfc6b1937663e57983d38562a Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 14:54:58 -0400
Subject: [PATCH 22/52] Use vue3 teleport instead of portal

---
 src/components/account_actions/account_actions.vue | 4 ++--
 src/components/desktop_nav/desktop_nav.vue         | 4 ++--
 src/components/extra_buttons/extra_buttons.vue     | 4 ++--
 src/components/follow_button/follow_button.vue     | 4 ++--
 src/components/mobile_nav/mobile_nav.vue           | 4 ++--
 src/components/retweet_button/retweet_button.vue   | 4 ++--
 src/components/user_card/user_card.vue             | 4 ++--
 7 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 273aac6985..fc303271d1 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -74,7 +74,7 @@
         </button>
       </template>
     </Popover>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmBlock"
         :title="$t('user_card.block_confirm_title')"
@@ -93,7 +93,7 @@
           />
         </i18n>
       </confirm-modal>
-    </portal>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 186303853a..92622cf91c 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -76,7 +76,7 @@
         </button>
       </div>
     </div>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
@@ -87,7 +87,7 @@
       >
         {{ $t('login.logout_confirm') }}
       </confirm-modal>
-    </portal>
+    </teleport>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 4641947a1a..c1c15c0fb5 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -165,7 +165,7 @@
           />
         </FALayers>
       </span>
-      <portal to="modal">
+      <teleport to="#modal">
         <ConfirmModal
           v-if="showingDeleteDialog"
           :title="$t('status.delete_confirm_title')"
@@ -176,7 +176,7 @@
         >
           {{ $t('status.delete_confirm') }}
         </ConfirmModal>
-      </portal>
+      </teleport>
     </template>
   </Popover>
 </template>
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index 5c7994062b..b45673484e 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -7,7 +7,7 @@
     @click="onClick"
   >
     {{ label }}
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmUnfollow"
         :title="$t('user_card.unfollow_confirm_title')"
@@ -26,7 +26,7 @@
           />
         </i18n>
       </confirm-modal>
-    </portal>
+    </teleport>
   </button>
 </template>
 
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6b6b8f21a8..6d826622aa 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -88,7 +88,7 @@
       ref="sideDrawer"
       :logout="logout"
     />
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
@@ -99,7 +99,7 @@
       >
         {{ $t('login.logout_confirm') }}
       </confirm-modal>
-    </portal>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 9ed24bd534..134fcb36a2 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -59,7 +59,7 @@
     >
       {{ status.repeat_num }}
     </span>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmDialog"
         :title="$t('status.repeat_confirm_title')"
@@ -70,7 +70,7 @@
       >
         {{ $t('status.repeat_confirm') }}
       </confirm-modal>
-    </portal>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5a848ead5d..856ed54b08 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -314,7 +314,7 @@
         :handle-links="true"
       />
     </div>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmMute"
         :title="$t('user_card.mute_confirm_title')"
@@ -333,7 +333,7 @@
           />
         </i18n>
       </confirm-modal>
-    </portal>
+    </teleport>
   </div>
 </template>
 

From 76d99c08d6740886b8c52ee4a0291706dc68ca3f Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 15:02:21 -0400
Subject: [PATCH 23/52] Move modal out of vue tree

---
 index.html  | 1 +
 src/App.vue | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 4af84a5940..c02bf30837 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
   <body class="hidden">
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
     <div id="app"></div>
+    <div id="modal" />
     <!-- built files will be auto injected -->
     <div id="popovers" />
   </body>
diff --git a/src/App.vue b/src/App.vue
index 23a388a629..fe214ce718 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,7 +71,6 @@
     <StatusHistoryModal v-if="editingAvailable" />
     <SettingsModal />
     <UpdateNotification />
-    <div id="modal" />
     <GlobalNoticeList />
   </div>
 </template>

From 0b914d78155b8b5a5adfbeba91198766e315b9a0 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 15:05:09 -0400
Subject: [PATCH 24/52] Make modal display over the top bar

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

diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 24d651426e..341cf1054b 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -39,7 +39,7 @@
     right: 0;
     top: 0;
     background: rgb(27 31 35 / 50%);
-    z-index: 99;
+    z-index: 2000;
   }
 }
 
@@ -51,7 +51,7 @@
   margin: 15vh auto;
   position: fixed;
   transform: translateX(-50%);
-  z-index: 999;
+  z-index: 2001;
   cursor: default;
   display: block;
   background-color: $fallback--bg;

From 91c4a57fe50fae8b6e8defe08f09c8a7090bf649 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 9 Apr 2022 23:11:19 -0400
Subject: [PATCH 25/52] Make page unscrollable when confirm modal is shown

Or we could scroll until the component is ... hidden
due to virtual-scrolling, and the modal disappears!
---
 src/components/confirm_modal/confirm_modal.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 5b5014c5e1..1ac64b625c 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -1,5 +1,6 @@
 <template>
   <dialog-modal
+    v-body-scroll-lock="true"
     class="confirm-modal"
     :on-cancel="onCancel"
   >

From ec957d41620fecc5103474f1b07bbb96f5cae446 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 9 Apr 2022 23:26:27 -0400
Subject: [PATCH 26/52] Make confirm dialogs work with vue-i18n 9

---
 .../account_actions/account_actions.vue           | 15 ++++++++-------
 src/components/follow_button/follow_button.vue    | 15 ++++++++-------
 src/components/user_card/user_card.vue            | 15 ++++++++-------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index fc303271d1..161bab0999 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -83,15 +83,16 @@
         @accepted="doBlockUser"
         @cancelled="hideConfirmBlock"
       >
-        <i18n
-          path="user_card.block_confirm"
+        <i18n-t
+          keypath="user_card.block_confirm"
           tag="span"
         >
-          <span
-            place="user"
-            v-text="user.screen_name_ui"
-          />
-        </i18n>
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
       </confirm-modal>
     </teleport>
   </div>
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index b45673484e..e421c15b3a 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -16,15 +16,16 @@
         @accepted="doUnfollow"
         @cancelled="hideConfirmUnfollow"
       >
-        <i18n
-          path="user_card.unfollow_confirm"
+        <i18n-t
+          keypath="user_card.unfollow_confirm"
           tag="span"
         >
-          <span
-            place="user"
-            v-text="user.screen_name_ui"
-          />
-        </i18n>
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
       </confirm-modal>
     </teleport>
   </button>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 856ed54b08..01882aa828 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -323,15 +323,16 @@
         @accepted="doMuteUser"
         @cancelled="hideConfirmMute"
       >
-        <i18n
-          path="user_card.mute_confirm"
+        <i18n-t
+          keypath="user_card.mute_confirm"
           tag="span"
         >
-          <span
-            place="user"
-            v-text="user.screen_name_ui"
-          />
-        </i18n>
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
       </confirm-modal>
     </teleport>
   </div>

From 95c15fca225d989613a50a6039c8ffa809a8fd88 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 9 Apr 2022 23:32:15 -0400
Subject: [PATCH 27/52] Use correct html syntax for modal <div>

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index c02bf30837..a02939f7ea 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
   <body class="hidden">
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
     <div id="app"></div>
-    <div id="modal" />
+    <div id="modal"></div>
     <!-- built files will be auto injected -->
     <div id="popovers" />
   </body>

From 228a9afdf5ecc10a17de31f88bd88ad1efbe0004 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 30 Apr 2022 11:08:19 -0400
Subject: [PATCH 28/52] Add timed-mute functionality

---
 src/components/poll/poll_form.js        | 13 ++----------
 src/components/user_card/user_card.js   | 13 ++++++++++--
 src/components/user_card/user_card.scss |  5 +++++
 src/components/user_card/user_card.vue  | 28 ++++++++++++++++++++++++-
 src/modules/users.js                    |  7 +++++--
 src/services/api/api.service.js         |  8 +++++--
 src/services/date_utils/date_utils.js   | 16 ++++++++++++++
 7 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index e30645c34e..a207015537 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -94,19 +94,10 @@ export default {
     },
     convertExpiryToUnit (unit, amount) {
       // Note: we want seconds and not milliseconds
-      switch (unit) {
-        case 'minutes': return (1000 * amount) / DateUtils.MINUTE
-        case 'hours': return (1000 * amount) / DateUtils.HOUR
-        case 'days': return (1000 * amount) / DateUtils.DAY
-      }
+      return DateUtils.secondsToUnit(unit, amount)
     },
     convertExpiryFromUnit (unit, amount) {
-      // Note: we want seconds and not milliseconds
-      switch (unit) {
-        case 'minutes': return 0.001 * amount * DateUtils.MINUTE
-        case 'hours': return 0.001 * amount * DateUtils.HOUR
-        case 'days': return 0.001 * amount * DateUtils.DAY
-      }
+      return DateUtils.unitToSeconds(unit, amount)
     },
     expiryAmountChange () {
       this.expiryAmount =
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 1bcc434100..e17bf8eb28 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,3 +1,4 @@
+import { unitToSeconds } from 'src/services/date_utils/date_utils.js'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
@@ -48,7 +49,9 @@ export default {
     return {
       followRequestInProgress: false,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter,
-      showingConfirmMute: false
+      showingConfirmMute: false,
+      muteExpiryAmount: 0,
+      muteExpiryUnit: 'minutes'
     }
   },
   created () {
@@ -142,6 +145,9 @@ export default {
     shouldConfirmMute () {
       return this.mergedConfig.modalOnMute
     },
+    muteExpiryUnits () {
+      return ['minutes', 'hours', 'days']
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
@@ -172,7 +178,10 @@ export default {
       }
     },
     doMuteUser () {
-      this.$store.dispatch('muteUser', this.user.id)
+      this.$store.dispatch('muteUser', {
+        id: this.user.id,
+        expiresIn: this.shouldConfirmMute ? unitToSeconds(this.muteExpiryUnit, this.muteExpiryAmount) : 0
+      })
       this.hideConfirmMute()
     },
     unmuteUser () {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index d56b667203..4ab93a8a36 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -355,3 +355,8 @@
     text-decoration: none;
   }
 }
+
+.mute-expiry {
+  display: flex;
+  flex-direction: row;
+}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 01882aa828..2de14063de 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -325,7 +325,7 @@
       >
         <i18n-t
           keypath="user_card.mute_confirm"
-          tag="span"
+          tag="div"
         >
           <template #user>
             <span
@@ -333,6 +333,32 @@
             />
           </template>
         </i18n-t>
+        <div
+          class="mute-expiry"
+        >
+          <label>
+            {{ $t('user_card.mute_duration_prompt') }}
+          </label>
+          <input
+            v-model="muteExpiryAmount"
+            type="number"
+            class="expiry-amount hide-number-spinner"
+            :min="0"
+          >
+          <Select
+            v-model="muteExpiryUnit"
+            unstyled="true"
+            class="expiry-unit"
+          >
+            <option
+              v-for="unit in muteExpiryUnits"
+              :key="unit"
+              :value="unit"
+            >
+              {{ $t(`time.${unit}_short`, ['']) }}
+            </option>
+          </Select>
+        </div>
       </confirm-modal>
     </teleport>
   </div>
diff --git a/src/modules/users.js b/src/modules/users.js
index 053e44b690..a1316ba259 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -61,13 +61,16 @@ const editUserNote = (store, { id, comment }) => {
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
 
-const muteUser = (store, id) => {
+const muteUser = (store, args) => {
+  const id = typeof args === 'object' ? args.id : args
+  const expiresIn = typeof args === 'object' ? args.expiresIn : 0
+
   const predictedRelationship = store.state.relationships[id] || { id }
   predictedRelationship.muting = true
   store.commit('updateUserRelationship', [predictedRelationship])
   store.commit('addMuteId', id)
 
-  return store.rootState.api.backendInteractor.muteUser({ id })
+  return store.rootState.api.backendInteractor.muteUser({ id, expiresIn })
     .then((relationship) => {
       store.commit('updateUserRelationship', [relationship])
       store.commit('addMuteId', id)
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index af12265e89..c7a36af921 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1118,8 +1118,12 @@ const fetchMutes = ({ credentials }) => {
     .then((users) => users.map(parseUser))
 }
 
-const muteUser = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST' })
+const muteUser = ({ id, expiresIn, credentials }) => {
+  const payload = {}
+  if (expiresIn) {
+    payload['expires_in'] = expiresIn
+  }
+  return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST', payload })
 }
 
 const unmuteUser = ({ id, credentials }) => {
diff --git a/src/services/date_utils/date_utils.js b/src/services/date_utils/date_utils.js
index c93d21761e..ed8e14170b 100644
--- a/src/services/date_utils/date_utils.js
+++ b/src/services/date_utils/date_utils.js
@@ -41,3 +41,19 @@ export const relativeTimeShort = (date, nowThreshold = 1) => {
   r.key += '_short'
   return r
 }
+
+export const unitToSeconds = (unit, amount) => {
+  switch (unit) {
+    case 'minutes': return 0.001 * amount * MINUTE
+    case 'hours': return 0.001 * amount * HOUR
+    case 'days': return 0.001 * amount * DAY
+  }
+}
+
+export const secondsToUnit = (unit, amount) => {
+  switch (unit) {
+    case 'minutes': return (1000 * amount) / MINUTE
+    case 'hours': return (1000 * amount) / HOUR
+    case 'days': return (1000 * amount) / DAY
+  }
+}

From b7af37fce8bf11492681f206cfc2afcf00ff5ded Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 30 Apr 2022 11:08:37 -0400
Subject: [PATCH 29/52] Add English translation for mute duration

---
 src/i18n/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index f7d83aa324..fc0de3ac9e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -950,6 +950,7 @@
     "mute_confirm": "Do you really want to mute {user}?",
     "mute_confirm_accept_button": "Mute",
     "mute_confirm_cancel_button": "Do not mute",
+    "mute_duration_prompt": "Mute this user for (0 for indefinite time):",
     "per_day": "per day",
     "remote_follow": "Remote follow",
     "remove_follower": "Remove follower",

From 547e85c7c6f9bf8779cc06344c4eebaaa8f9d775 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 7 Jun 2022 12:37:16 -0400
Subject: [PATCH 30/52] Add confirm dialogs for accept & deny follow requests

---
 .../follow_request_card.js                    | 49 ++++++++++++++++++-
 .../follow_request_card.vue                   | 22 +++++++++
 src/components/notification/notification.js   | 43 +++++++++++++++-
 src/components/notification/notification.vue  | 22 +++++++++
 .../settings_modal/tabs/general_tab.vue       | 10 ++++
 src/modules/config.js                         |  2 +
 src/modules/instance.js                       |  2 +
 7 files changed, 147 insertions(+), 3 deletions(-)

diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index cbd75311e8..b0873bb109 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -1,10 +1,18 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 
 const FollowRequestCard = {
   props: ['user'],
   components: {
-    BasicUserCard
+    BasicUserCard,
+    ConfirmModal
+  },
+  data () {
+    return {
+      showingApproveConfirmDialog: false,
+      showingDenyConfirmDialog: false
+    }
   },
   methods: {
     findFollowRequestNotificationId () {
@@ -13,7 +21,26 @@ const FollowRequestCard = {
       )
       return notif && notif.id
     },
+    showApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = true
+    },
+    hideApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = false
+    },
+    showDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = true
+    },
+    hideDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = false
+    },
     approveUser () {
+      if (this.shouldConfirmApprove) {
+        this.showApproveConfirmDialog()
+      } else {
+        this.doApprove()
+      }
+    },
+    doApprove () {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
 
@@ -25,14 +52,34 @@ const FollowRequestCard = {
           notification.type = 'follow'
         }
       })
+      this.hideApproveConfirmDialog()
     },
     denyUser () {
+      if (this.shouldConfirmDeny) {
+        this.showDenyConfirmDialog()
+      } else {
+        this.doDeny()
+      }
+    },
+    doDeny () {
       const notifId = this.findFollowRequestNotificationId()
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
         .then(() => {
           this.$store.dispatch('dismissNotificationLocal', { id: notifId })
           this.$store.dispatch('removeFollowRequest', this.user)
         })
+      this.hideDenyConfirmDialog()
+    }
+  },
+  computed: {
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
+    shouldConfirmApprove () {
+      return this.mergedConfig.modalOnApproveFollow
+    },
+    shouldConfirmDeny () {
+      return this.mergedConfig.modalOnDenyFollow
     }
   }
 }
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index eb222cc7d8..55b651120b 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -14,6 +14,28 @@
         {{ $t('user_card.deny') }}
       </button>
     </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingApproveConfirmDialog"
+        :title="$t('user_card.approve_confirm_title')"
+        :confirm-text="$t('user_card.approve_confirm_accept_button')"
+        :cancel-text="$t('user_card.approve_confirm_cancel_button')"
+        @accepted="doApprove"
+        @cancelled="hideApproveConfirmDialog"
+      >
+        {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+      <confirm-modal
+        v-if="showingDenyConfirmDialog"
+        :title="$t('user_card.deny_confirm_title')"
+        :confirm-text="$t('user_card.deny_confirm_accept_button')"
+        :cancel-text="$t('user_card.deny_confirm_cancel_button')"
+        @accepted="doDeny"
+        @cancelled="hideDenyConfirmDialog"
+      >
+        {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+    </teleport>
   </basic-user-card>
 </template>
 
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 265aaee0a5..0ce8892e0c 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -8,6 +8,7 @@ import Report from '../report/report.vue'
 import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UserPopover from '../user_popover/user_popover.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -43,7 +44,9 @@ const Notification = {
     return {
       statusExpanded: false,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter,
-      unmuted: false
+      unmuted: false,
+      showingApproveConfirmDialog: false,
+      showingDenyConfirmDialog: false
     }
   },
   props: ['notification'],
@@ -56,7 +59,8 @@ const Notification = {
     Report,
     RichContent,
     UserPopover,
-    UserLink
+    UserLink,
+    ConfirmModal
   },
   methods: {
     toggleStatusExpanded () {
@@ -71,7 +75,26 @@ const Notification = {
     toggleMute () {
       this.unmuted = !this.unmuted
     },
+    showApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = true
+    },
+    hideApproveConfirmDialog () {
+      this.showingApproveConfirmDialog = false
+    },
+    showDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = true
+    },
+    hideDenyConfirmDialog () {
+      this.showingDenyConfirmDialog = false
+    },
     approveUser () {
+      if (this.shouldConfirmApprove) {
+        this.showApproveConfirmDialog()
+      } else {
+        this.doApprove()
+      }
+    },
+    doApprove () {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
       this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
@@ -83,6 +106,13 @@ const Notification = {
       })
     },
     denyUser () {
+      if (this.shouldConfirmDeny) {
+        this.showDenyConfirmDialog()
+      } else {
+        this.doDeny()
+      }
+    },
+    doDeny () {
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
         .then(() => {
           this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
@@ -117,6 +147,15 @@ const Notification = {
     isStatusNotification () {
       return isStatusNotification(this.notification.type)
     },
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    },
+    shouldConfirmApprove () {
+      return this.mergedConfig.modalOnApproveFollow
+    },
+    shouldConfirmDeny () {
+      return this.mergedConfig.modalOnDenyFollow
+    },
     ...mapState({
       currentUser: state => state.users.currentUser
     })
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index f1aa542076..e1ea42aded 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -243,6 +243,28 @@
         </template>
       </div>
     </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingApproveConfirmDialog"
+        :title="$t('user_card.approve_confirm_title')"
+        :confirm-text="$t('user_card.approve_confirm_accept_button')"
+        :cancel-text="$t('user_card.approve_confirm_cancel_button')"
+        @accepted="doApprove"
+        @cancelled="hideApproveConfirmDialog"
+      >
+        {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+      <confirm-modal
+        v-if="showingDenyConfirmDialog"
+        :title="$t('user_card.deny_confirm_title')"
+        :confirm-text="$t('user_card.deny_confirm_accept_button')"
+        :cancel-text="$t('user_card.deny_confirm_cancel_button')"
+        @accepted="doDeny"
+        @cancelled="hideDenyConfirmDialog"
+      >
+        {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
+      </confirm-modal>
+    </teleport>
   </article>
 </template>
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 906c37584e..9de3ed81f3 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -181,6 +181,16 @@
                 {{ $t('settings.confirm_dialogs_logout') }}
               </BooleanSetting>
             </li>
+            <li>
+              <BooleanSetting path="modalOnApproveFollow">
+                {{ $t('settings.confirm_dialogs_approve_follow') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnDenyFollow">
+                {{ $t('settings.confirm_dialogs_deny_follow') }}
+              </BooleanSetting>
+            </li>
           </ul>
         </li>
       </ul>
diff --git a/src/modules/config.js b/src/modules/config.js
index a894903053..1df279a224 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -84,6 +84,8 @@ export const defaultState = {
   modalOnMute: undefined, // instance default
   modalOnDelete: undefined, // instance default
   modalOnLogout: undefined, // instance default
+  modalOnApproveFollow: undefined, // instance default
+  modalOnDenyFollow: undefined, // instance default
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 6fc3830c8e..fcb6eecc67 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -77,6 +77,8 @@ const defaultState = {
   modalOnMute: false,
   modalOnDelete: true,
   modalOnLogout: true,
+  modalOnApproveFollow: false,
+  modalOnDenyFollow: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',

From 041bbb162299b896f5d0583c1ed4e8dcdc035c38 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 7 Jun 2022 12:37:38 -0400
Subject: [PATCH 31/52] Add English translation for accept & deny follow
 requests

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

diff --git a/src/i18n/en.json b/src/i18n/en.json
index fc0de3ac9e..213f9cf012 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -427,6 +427,8 @@
     "confirm_dialogs_mute": "muting a user",
     "confirm_dialogs_delete": "deleting a status",
     "confirm_dialogs_logout": "logging out",
+    "confirm_dialogs_approve_follow": "approving a follower",
+    "confirm_dialogs_deny_follow": "denying a follower",
     "mutes_and_blocks": "Mutes and Blocks",
     "data_import_export_tab": "Data import / export",
     "default_vis": "Default visibility scope",
@@ -916,6 +918,10 @@
   },
   "user_card": {
     "approve": "Approve",
+    "approve_confirm_title": "Approve confirmation",
+    "approve_confirm_accept_button": "Approve",
+    "approve_confirm_cancel_button": "Do not approve",
+    "approve_confirm": "Do you want to approve {user}'s follow request?",
     "block": "Block",
     "blocked": "Blocked!",
     "block_confirm_title": "Block confirmation",
@@ -924,6 +930,10 @@
     "block_confirm_cancel_button": "Do not block",
     "deactivated": "Deactivated",
     "deny": "Deny",
+    "deny_confirm_title": "Deny confirmation",
+    "deny_confirm_accept_button": "Deny",
+    "deny_confirm_cancel_button": "Do not deny",
+    "deny_confirm": "Do you want to deny {user}'s follow request?",
     "edit_profile": "Edit profile",
     "favorites": "Favorites",
     "follow": "Follow",

From 1856eeda40e76618717a66b51ffc49a1ecf8c967 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 10 Jun 2022 15:55:31 -0400
Subject: [PATCH 32/52] Auto close confirm dialog after approve/deny

---
 src/components/notification/notification.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 0ce8892e0c..420db4f0f3 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -104,6 +104,7 @@ const Notification = {
           notification.type = 'follow'
         }
       })
+      this.hideApproveConfirmDialog()
     },
     denyUser () {
       if (this.shouldConfirmDeny) {
@@ -118,6 +119,7 @@ const Notification = {
           this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
           this.$store.dispatch('removeFollowRequest', this.user)
         })
+      this.hideDenyConfirmDialog()
     }
   },
   computed: {

From 8a99d129dcc4a07375727b4f8959c7fa775b8ec0 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 1 Aug 2022 11:02:21 -0400
Subject: [PATCH 33/52] Fix confirm modal lint

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

diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 1ac64b625c..3b98174aa9 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -4,13 +4,13 @@
     class="confirm-modal"
     :on-cancel="onCancel"
   >
-    <template v-slot:header>
+    <template #header>
       <span v-text="title" />
     </template>
 
     <slot />
 
-    <template v-slot:footer>
+    <template #footer>
       <button
         class="btn button-default"
         @click.prevent="onAccept"

From 5359633c743455739a8b6fe64e246c832656b4d0 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 1 Aug 2022 11:08:32 -0400
Subject: [PATCH 34/52] Fix timed mute lint

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

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index c7a36af921..b8c10b2138 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1121,7 +1121,7 @@ const fetchMutes = ({ credentials }) => {
 const muteUser = ({ id, expiresIn, credentials }) => {
   const payload = {}
   if (expiresIn) {
-    payload['expires_in'] = expiresIn
+    payload.expires_in = expiresIn
   }
   return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST', payload })
 }

From 4db7f07421a6dc49f07dee9140a024ef5195a934 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 24 Nov 2022 23:26:31 -0500
Subject: [PATCH 35/52] Make autocomplete items buttons

---
 src/components/emoji_input/emoji_input.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index ccba0393dc..6df2cebef6 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -53,6 +53,7 @@
             v-for="(suggestion, index) in suggestions"
             :key="index"
             class="autocomplete-item"
+            role="button"
             :class="{ highlighted: index === highlighted }"
             @click.stop.prevent="onClick($event, suggestion)"
           >

From 6235af4592c52a657415ffae772bd83ec106bc13 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 01:07:07 -0500
Subject: [PATCH 36/52] Make screenreaders read out autocomplete results

---
 src/components/emoji_input/emoji_input.js     | 53 ++++++++++++-------
 src/components/emoji_input/emoji_input.vue    | 19 ++++++-
 .../post_status_form/post_status_form.vue     | 53 +++++++++++--------
 .../screen_reader_notice.js                   | 21 ++++++++
 .../screen_reader_notice.vue                  | 21 ++++++++
 src/i18n/en.json                              |  3 +-
 6 files changed, 126 insertions(+), 44 deletions(-)
 create mode 100644 src/components/screen_reader_notice/screen_reader_notice.js
 create mode 100644 src/components/screen_reader_notice/screen_reader_notice.vue

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index ba5f7552e1..020e9fdecf 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -1,6 +1,7 @@
 import Completion from '../../services/completion/completion.js'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import Popover from 'src/components/popover/popover.vue'
+import ScreenReaderNotice from 'src/components/screen_reader_notice/screen_reader_notice.vue'
 import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 import { take } from 'lodash'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
@@ -109,9 +110,10 @@ const EmojiInput = {
   },
   data () {
     return {
+      randomSeed: `${Math.random()}`.replace('.', '-'),
       input: undefined,
       caretEl: undefined,
-      highlighted: 0,
+      highlighted: -1,
       caret: 0,
       focused: false,
       blurTimeout: null,
@@ -125,7 +127,8 @@ const EmojiInput = {
   components: {
     Popover,
     EmojiPicker,
-    UnicodeDomainIndicator
+    UnicodeDomainIndicator,
+    ScreenReaderNotice
   },
   computed: {
     padEmoji () {
@@ -203,6 +206,12 @@ const EmojiInput = {
         top: this.input.scrollTop,
         left: this.input.scrollLeft
       })
+    },
+    suggestionListId () {
+      return `suggestions-${this.randomSeed}`
+    },
+    suggestionItemId () {
+      return (index) => `suggestion-item-${index}-${this.randomSeed}`
     }
   },
   mounted () {
@@ -278,6 +287,10 @@ const EmojiInput = {
           ...rest,
           img: imageUrl || ''
         }))
+      this.$refs.screenReaderNotice.announce(
+        this.$tc('tool_tip.autocomplete_available',
+          this.suggestions.length,
+          { number: this.suggestions.length }))
     }
   },
   methods: {
@@ -374,27 +387,24 @@ const EmojiInput = {
     },
     cycleBackward (e) {
       const len = this.suggestions.length || 0
-      if (len > 1) {
-        this.highlighted -= 1
-        if (this.highlighted < 0) {
-          this.highlighted = this.suggestions.length - 1
-        }
-        e.preventDefault()
-      } else {
-        this.highlighted = 0
+
+      this.highlighted -= 1
+      if (this.highlighted === -1) {
+        this.input.focus()
+      } else if (this.highlighted < -1) {
+        this.highlighted = len - 1
       }
+      e.preventDefault()
     },
     cycleForward (e) {
       const len = this.suggestions.length || 0
-      if (len > 1) {
-        this.highlighted += 1
-        if (this.highlighted >= len) {
-          this.highlighted = 0
-        }
-        e.preventDefault()
-      } else {
-        this.highlighted = 0
+
+      this.highlighted += 1
+      if (this.highlighted >= len) {
+        this.highlighted = -1
+        this.input.focus()
       }
+      e.preventDefault()
     },
     scrollIntoView () {
       const rootRef = this.$refs.picker.$el
@@ -540,6 +550,13 @@ const EmojiInput = {
       })
     },
     resize () {
+    },
+    autoCompleteItemLabel (suggestion) {
+      if (suggestion.user) {
+        return suggestion.displayText + ' ' + suggestion.detailText
+      } else {
+        return this.maybeLocalizedEmojiName(suggestion)
+      }
     }
   }
 }
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 6df2cebef6..4a7b0fa87c 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -4,7 +4,13 @@
     class="emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
-    <slot />
+    <slot
+      :id="'textbox-' + randomSeed"
+      :aria-owns="suggestionListId"
+      aria-autocomplete="both"
+      :aria-expanded="showSuggestions"
+      :aria-activedescendant="(!showSuggestions || highlighted === -1) ? '' : suggestionItemId(highlighted)"
+    />
     <!-- TODO: make the 'x' disappear if at the end maybe? -->
     <div
       ref="hiddenOverlay"
@@ -18,6 +24,10 @@
       >x</span>
       <span>{{ postText }}</span>
     </div>
+    <screen-reader-notice
+      ref="screenReaderNotice"
+      aria-live="assertive"
+    />
     <template v-if="enableEmojiPicker">
       <button
         v-if="!hideEmojiButton"
@@ -46,15 +56,20 @@
     >
       <template #content>
         <div
+          :id="suggestionListId"
           ref="panel-body"
           class="autocomplete-panel-body"
+          role="listbox"
         >
           <div
             v-for="(suggestion, index) in suggestions"
+            :id="suggestionItemId(index)"
             :key="index"
             class="autocomplete-item"
-            role="button"
+            role="option"
             :class="{ highlighted: index === highlighted }"
+            :aria-label="autoCompleteItemLabel(suggestion)"
+            :aria-selected="index === highlighted"
             @click.stop.prevent="onClick($event, suggestion)"
           >
             <span class="image">
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index c51639db9d..26a5acc436 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -148,29 +148,36 @@
           @sticker-upload-failed="uploadFailed"
           @shown="handleEmojiInputShow"
         >
-          <textarea
-            ref="textarea"
-            v-model="newStatus.status"
-            :placeholder="placeholder || $t('post_status.default')"
-            rows="1"
-            cols="1"
-            :disabled="posting && !optimisticPosting"
-            class="form-post-body"
-            :class="{ 'scrollable-form': !!maxHeight }"
-            @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
-            @keydown.meta.enter="postStatus($event, newStatus)"
-            @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
-            @input="resize"
-            @compositionupdate="resize"
-            @paste="paste"
-          />
-          <p
-            v-if="hasStatusLengthLimit"
-            class="character-counter faint"
-            :class="{ error: isOverLengthLimit }"
-          >
-            {{ charactersLeft }}
-          </p>
+          <template #default="inputProps">
+            <textarea
+              ref="textarea"
+              v-model="newStatus.status"
+              :placeholder="placeholder || $t('post_status.default')"
+              rows="1"
+              cols="1"
+              :disabled="posting && !optimisticPosting"
+              class="form-post-body"
+              :class="{ 'scrollable-form': !!maxHeight }"
+              v-bind="inputProps"
+              :aria-owns="inputProps.ariaOwns"
+              :aria-autocomplete="inputProps.ariaAutocomplete"
+              :aria-activedescendant="inputProps.ariaActiveDescendant"
+              :aria-expanded="inputProps.ariaExpanded"
+              @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
+              @keydown.meta.enter="postStatus($event, newStatus)"
+              @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
+              @input="resize"
+              @compositionupdate="resize"
+              @paste="paste"
+            />
+            <p
+              v-if="hasStatusLengthLimit"
+              class="character-counter faint"
+              :class="{ error: isOverLengthLimit }"
+            >
+              {{ charactersLeft }}
+            </p>
+          </template>
         </EmojiInput>
         <div
           v-if="!disableScopeSelector"
diff --git a/src/components/screen_reader_notice/screen_reader_notice.js b/src/components/screen_reader_notice/screen_reader_notice.js
new file mode 100644
index 0000000000..3b8eaf3721
--- /dev/null
+++ b/src/components/screen_reader_notice/screen_reader_notice.js
@@ -0,0 +1,21 @@
+const ScreenReaderNotice = {
+  props: {
+    ariaLive: {
+      type: String,
+      defualt: 'assertive'
+    }
+  },
+  data () {
+    return {
+      currentText: ''
+    }
+  },
+  methods: {
+    announce (text) {
+      this.currentText = text
+      setTimeout(() => { this.currentText = '' }, 1000)
+    }
+  }
+}
+
+export default ScreenReaderNotice
diff --git a/src/components/screen_reader_notice/screen_reader_notice.vue b/src/components/screen_reader_notice/screen_reader_notice.vue
new file mode 100644
index 0000000000..5098b94fbd
--- /dev/null
+++ b/src/components/screen_reader_notice/screen_reader_notice.vue
@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="screen-reader-text"
+    :aria-live="ariaLive"
+  >
+    {{ currentText }}
+  </div>
+</template>
+
+<script src="./screen_reader_notice.js"></script>
+
+<style lang="scss">
+.screen-reader-text {
+  display: block;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  visibility: visible;
+}
+</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1ee1147ad3..6166a5102d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -996,7 +996,8 @@
     "reject_follow_request": "Reject follow request",
     "bookmark": "Bookmark",
     "toggle_expand": "Expand or collapse notification to show post in full",
-    "toggle_mute": "Expand or collapse notification to reveal muted content"
+    "toggle_mute": "Expand or collapse notification to reveal muted content",
+    "autocomplete_available": "{number} result is available | {number} results are available"
   },
   "upload": {
     "error": {

From 72cb9e8bdbd41b66f72f8dd0dcd52cc04c7a2245 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 01:28:43 -0500
Subject: [PATCH 37/52] Make all emoji inputs screen-reader-friendly

---
 src/components/emoji_input/emoji_input.js     |  1 +
 .../post_status_form/post_status_form.js      |  4 ++
 .../post_status_form/post_status_form.vue     | 25 +++++-----
 .../settings_modal/tabs/profile_tab.js        |  4 ++
 .../settings_modal/tabs/profile_tab.vue       | 46 ++++++++++++-------
 .../attributes_helper.service.js              |  8 ++++
 6 files changed, 58 insertions(+), 30 deletions(-)
 create mode 100644 src/services/attributes_helper/attributes_helper.service.js

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 020e9fdecf..3b0db7864b 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -287,6 +287,7 @@ const EmojiInput = {
           ...rest,
           img: imageUrl || ''
         }))
+      this.highlighted = -1
       this.$refs.screenReaderNotice.announce(
         this.$tc('tool_tip.autocomplete_available',
           this.suggestions.length,
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index eb55cfcc5c..b75fee6911 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -8,6 +8,7 @@ import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from '../status_content/status_content.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
+import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
 import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
@@ -629,6 +630,9 @@ const PostStatusForm = {
     },
     openProfileTab () {
       this.$store.dispatch('openSettingsModalTab', 'profile')
+    },
+    propsToNative (props) {
+      return propsToNative(props)
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 26a5acc436..328e145f2e 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -124,14 +124,17 @@
           :suggest="emojiSuggestor"
           class="form-control"
         >
-          <input
-            v-model="newStatus.spoilerText"
-            type="text"
-            :placeholder="$t('post_status.content_warning')"
-            :disabled="posting && !optimisticPosting"
-            size="1"
-            class="form-post-subject"
-          >
+          <template #default="inputProps">
+            <input
+              v-model="newStatus.spoilerText"
+              type="text"
+              :placeholder="$t('post_status.content_warning')"
+              :disabled="posting && !optimisticPosting"
+              v-bind="propsToNative(inputProps)"
+              size="1"
+              class="form-post-subject"
+            >
+          </template>
         </EmojiInput>
         <EmojiInput
           ref="emoji-input"
@@ -158,11 +161,7 @@
               :disabled="posting && !optimisticPosting"
               class="form-post-body"
               :class="{ 'scrollable-form': !!maxHeight }"
-              v-bind="inputProps"
-              :aria-owns="inputProps.ariaOwns"
-              :aria-autocomplete="inputProps.ariaAutocomplete"
-              :aria-activedescendant="inputProps.ariaActiveDescendant"
-              :aria-expanded="inputProps.ariaExpanded"
+              v-bind="propsToNative(inputProps)"
               @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
               @keydown.meta.enter="postStatus($event, newStatus)"
               @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index ff2ccef224..50de733e45 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -12,6 +12,7 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import localeService from 'src/services/locale/locale.service.js'
+import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -257,6 +258,9 @@ const ProfileTab = {
         messageArgs: [error.message],
         level: 'error'
       })
+    },
+    propsToNative (props) {
+      return propsToNative(props)
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 642d54cab3..54704dadeb 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -8,11 +8,14 @@
         enable-emoji-picker
         :suggest="emojiSuggestor"
       >
-        <input
-          id="username"
-          v-model="newName"
-          class="name-changer"
-        >
+        <template #default="inputProps">
+          <input
+            id="username"
+            v-model="newName"
+            class="name-changer"
+            v-bind="propsToNative(inputProps)"
+          >
+        </template>
       </EmojiInput>
       <p>{{ $t('settings.bio') }}</p>
       <EmojiInput
@@ -20,10 +23,13 @@
         enable-emoji-picker
         :suggest="emojiUserSuggestor"
       >
-        <textarea
-          v-model="newBio"
-          class="bio resize-height"
-        />
+        <template #default="inputProps">
+          <textarea
+            v-model="newBio"
+            class="bio resize-height"
+            v-bind="propsToNative(inputProps)"
+          />
+        </template>
       </EmojiInput>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
@@ -48,10 +54,13 @@
             hide-emoji-button
             :suggest="userSuggestor"
           >
-            <input
-              v-model="newFields[i].name"
-              :placeholder="$t('settings.profile_fields.name')"
-            >
+            <template #default="inputProps">
+              <input
+                v-model="newFields[i].name"
+                :placeholder="$t('settings.profile_fields.name')"
+                v-bind="propsToNative(inputProps)"
+              >
+            </template>
           </EmojiInput>
           <EmojiInput
             v-model="newFields[i].value"
@@ -59,10 +68,13 @@
             hide-emoji-button
             :suggest="userSuggestor"
           >
-            <input
-              v-model="newFields[i].value"
-              :placeholder="$t('settings.profile_fields.value')"
-            >
+            <template #default="inputProps">
+              <input
+                v-model="newFields[i].value"
+                :placeholder="$t('settings.profile_fields.value')"
+                v-bind="propsToNative(inputProps)"
+              >
+            </template>
           </EmojiInput>
           <button
             class="delete-field button-unstyled -hover-highlight"
diff --git a/src/services/attributes_helper/attributes_helper.service.js b/src/services/attributes_helper/attributes_helper.service.js
new file mode 100644
index 0000000000..74d3323c91
--- /dev/null
+++ b/src/services/attributes_helper/attributes_helper.service.js
@@ -0,0 +1,8 @@
+import { kebabCase } from 'lodash'
+
+const propsToNative = props => Object.keys(props).reduce((acc, cur) => {
+  acc[kebabCase(cur)] = props[cur]
+  return acc
+}, {})
+
+export { propsToNative }

From 246593970b739138f518e1aa9545fd2f5168eb2a Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 01:30:44 -0500
Subject: [PATCH 38/52] Make autocomplete prompt more user-friendly

---
 src/i18n/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6166a5102d..ebd7d0af4b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -997,7 +997,7 @@
     "bookmark": "Bookmark",
     "toggle_expand": "Expand or collapse notification to show post in full",
     "toggle_mute": "Expand or collapse notification to reveal muted content",
-    "autocomplete_available": "{number} result is available | {number} results are available"
+    "autocomplete_available": "{number} result is available. Use up and down keys to navigate through them. | {number} results are available. Use up and down keys to navigate through them."
   },
   "upload": {
     "error": {

From 5478192e2074fc4c4f2d9ef1a751618c89fb3582 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 14:50:57 -0500
Subject: [PATCH 39/52] Make keys work as intended when there is no suggestions

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

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 3b0db7864b..8a8d098d07 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -395,7 +395,9 @@ const EmojiInput = {
       } else if (this.highlighted < -1) {
         this.highlighted = len - 1
       }
-      e.preventDefault()
+      if (len > 0) {
+        e.preventDefault()
+      }
     },
     cycleForward (e) {
       const len = this.suggestions.length || 0
@@ -405,7 +407,9 @@ const EmojiInput = {
         this.highlighted = -1
         this.input.focus()
       }
-      e.preventDefault()
+      if (len > 0) {
+        e.preventDefault()
+      }
     },
     scrollIntoView () {
       const rootRef = this.$refs.picker.$el

From 524363267811ce34ab82786ccf392ceb2708ac16 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 15:08:17 -0500
Subject: [PATCH 40/52] Label buttons in top bar

---
 src/components/desktop_nav/desktop_nav.vue | 7 ++++---
 src/components/search_bar/search_bar.vue   | 4 ++++
 src/i18n/en.json                           | 1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 07bf8005c7..e0ee39c3a6 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -20,6 +20,7 @@
         class="logo"
         :to="{ name: 'root' }"
         :style="logoBgStyle"
+        :title="sitename"
       >
         <div
           class="mask"
@@ -38,13 +39,13 @@
         />
         <button
           class="button-unstyled nav-icon"
+          :title="$t('nav.preferences')"
           @click.stop="openSettingsModal"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="cog"
-            :title="$t('nav.preferences')"
           />
         </button>
         <a
@@ -52,26 +53,26 @@
           href="/pleroma/admin/#/login-pleroma"
           class="nav-icon"
           target="_blank"
+          :title="$t('nav.administration')"
           @click.stop
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="tachometer-alt"
-            :title="$t('nav.administration')"
           />
         </a>
         <span class="spacer" />
         <button
           v-if="currentUser"
           class="button-unstyled nav-icon"
+          :title="$t('login.logout')"
           @click.stop.prevent="logout"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="sign-out-alt"
-            :title="$t('login.logout')"
           />
         </button>
       </div>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 3969d8de3e..9da2b27240 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -8,6 +8,7 @@
       class="button-unstyled nav-icon"
       :title="$t('nav.search')"
       type="button"
+      :aria-expanded="!hidden"
       @click.prevent.stop="toggleHidden"
     >
       <FAIcon
@@ -29,6 +30,7 @@
       <button
         class="button-default search-button"
         type="submit"
+        :title="$t('nav.search')"
         @click="find(searchTerm)"
       >
         <FAIcon
@@ -39,6 +41,8 @@
       <button
         class="button-unstyled cancel-search"
         type="button"
+        :title="$t('nav.search_close')"
+        :aria-expanded="!hidden"
         @click.prevent.stop="toggleHidden"
       >
         <FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1ee1147ad3..5b97bdcd2f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -172,6 +172,7 @@
     "bookmarks": "Bookmarks",
     "user_search": "User Search",
     "search": "Search",
+    "search_close": "Close search bar",
     "who_to_follow": "Who to follow",
     "preferences": "Preferences",
     "timelines": "Timelines",

From 1ab958ba6b0ad1e1449fd8fe6b0bc8729520ce12 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 15:30:23 -0500
Subject: [PATCH 41/52] Make quick settings menus more accessible

---
 .../quick_filter_settings.vue                 | 29 ++++++++-
 .../quick_view_settings.vue                   | 65 +++++++++++++------
 2 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index f2aa61ee92..b81215a1a2 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -6,36 +6,51 @@
     :trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
   >
     <template #content>
-      <div class="dropdown-menu">
-        <div v-if="loggedIn">
+      <div
+        class="dropdown-menu"
+        role="menu"
+      >
+        <div
+          v-if="loggedIn"
+          role="group"
+        >
           <button
             v-if="!conversation"
             class="button-default dropdown-item"
+            :aria-checked="replyVisibilityAll"
+            role="menuitemradio"
             @click="replyVisibilityAll = true"
           >
             <span
               class="menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
+              :aria-hidden="true"
             />{{ $t('settings.reply_visibility_all') }}
           </button>
           <button
             v-if="!conversation"
             class="button-default dropdown-item"
+            :aria-checked="replyVisibilityFollowing"
+            role="menuitemradio"
             @click="replyVisibilityFollowing = true"
           >
             <span
               class="menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
+              :aria-hidden="true"
             />{{ $t('settings.reply_visibility_following_short') }}
           </button>
           <button
             v-if="!conversation"
             class="button-default dropdown-item"
+            :aria-checked="replyVisibilitySelf"
+            role="menuitemradio"
             @click="replyVisibilitySelf = true"
           >
             <span
               class="menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
+              :aria-hidden="true"
             />{{ $t('settings.reply_visibility_self_short') }}
           </button>
           <div
@@ -46,33 +61,43 @@
         </div>
         <button
           class="button-default dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="muteBotStatuses"
           @click="muteBotStatuses = !muteBotStatuses"
         >
           <span
             class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': muteBotStatuses }"
+            :aria-hidden="true"
           />{{ $t('settings.mute_bot_posts') }}
         </button>
         <button
           class="button-default dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="hideMedia"
           @click="hideMedia = !hideMedia"
         >
           <span
             class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMedia }"
+            :aria-hidden="true"
           />{{ $t('settings.hide_media_previews') }}
         </button>
         <button
           class="button-default dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="hideMutedPosts"
           @click="hideMutedPosts = !hideMutedPosts"
         >
           <span
             class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMutedPosts }"
+            :aria-hidden="true"
           />{{ $t('settings.hide_all_muted_posts') }}
         </button>
         <button
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click="openTab('filtering')"
         >
           <FAIcon icon="font" />{{ $t('settings.word_filter_and_more') }}
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 4bd81c5bd8..9f5cdabc91 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -6,60 +6,87 @@
     :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
-      <div class="dropdown-menu">
-        <button
-          class="button-default dropdown-item"
-          @click="conversationDisplay = 'tree'"
-        >
-          <span
-            class="menu-checkbox -radio"
-            :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
-          /><FAIcon icon="folder-tree" /> {{ $t('settings.conversation_display_tree_quick') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="conversationDisplay = 'linear'"
-        >
-          <span
-            class="menu-checkbox -radio"
-            :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
-          /><FAIcon icon="list" /> {{ $t('settings.conversation_display_linear_quick') }}
-        </button>
+      <div
+        class="dropdown-menu"
+        role="menu"
+      >
+        <div role="group">
+          <button
+            class="button-default dropdown-item"
+            :aria-checked="conversationDisplay === 'tree'"
+            role="menuitemradio"
+            @click="conversationDisplay = 'tree'"
+          >
+            <span
+              class="menu-checkbox -radio"
+              :aria-hidden="true"
+              :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
+            /><FAIcon
+              icon="folder-tree"
+              :aria-hidden="true"
+            /> {{ $t('settings.conversation_display_tree_quick') }}
+          </button>
+          <button
+            class="button-default dropdown-item"
+            :aria-checked="conversationDisplay === 'linear'"
+            role="menuitemradio"
+            @click="conversationDisplay = 'linear'"
+          >
+            <span
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
+              :aria-hidden="true"
+            /><FAIcon
+              icon="list"
+              :aria-hidden="true"
+            /> {{ $t('settings.conversation_display_linear_quick') }}
+          </button>
+        </div>
         <div
           role="separator"
           class="dropdown-divider"
         />
         <button
           class="button-default dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="showUserAvatars"
           @click="showUserAvatars = !showUserAvatars"
         >
           <span
             class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': showUserAvatars }"
+            :aria-hidden="true"
           />{{ $t('settings.mention_link_show_avatar_quick') }}
         </button>
         <button
           v-if="!conversation"
           class="button-default dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="autoUpdate"
           @click="autoUpdate = !autoUpdate"
         >
           <span
             class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': autoUpdate }"
+            :aria-hidden="true"
           />{{ $t('settings.auto_update') }}
         </button>
         <button
           v-if="!conversation"
           class="button-default dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="collapseWithSubjects"
           @click="collapseWithSubjects = !collapseWithSubjects"
         >
           <span
             class="menu-checkbox"
             :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
+            :aria-hidden="true"
           />{{ $t('settings.collapse_subject') }}
         </button>
         <button
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click="openTab('general')"
         >
           <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}

From 68110ce8251610888348defc2e971c9c6af6a55b Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sun, 16 Jan 2022 01:19:52 -0500
Subject: [PATCH 42/52] Make interact buttons accessible for anonymous users

---
 .../favorite_button/favorite_button.vue        | 17 ++++++++++++-----
 src/components/reply_button/reply_button.vue   | 18 +++++++++++++-----
 .../retweet_button/retweet_button.vue          | 17 ++++++++++++-----
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 58d14945f6..8c883c13f9 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -38,13 +38,20 @@
       class="button-unstyled interactive"
       target="_blank"
       role="button"
+      :title="$t('tool_tip.favorite')"
       :href="remoteInteractionLink"
     >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        :title="$t('tool_tip.favorite')"
-        :icon="['far', 'star']"
-      />
+      <FALayers class="fa-scale-110 fa-old-padding-layer">
+        <FAIcon
+          class="fa-scale-110"
+          :icon="['far', 'star']"
+        />
+        <FAIcon
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="plus"
+        />
+      </FALayers>
     </a>
     <span
       v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index 6e3964b723..60a40a0863 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -32,12 +32,20 @@
       target="_blank"
       role="button"
       :href="remoteInteractionLink"
+      :title="$t('tool_tip.reply')"
     >
-      <FAIcon
-        icon="reply"
-        class="fa-scale-110 fa-old-padding"
-        :title="$t('tool_tip.reply')"
-      />
+      <FALayers class="fa-old-padding-layer">
+        <FAIcon
+          class="fa-scale-110"
+          icon="reply"
+        />
+        <FAIcon
+          v-if="!replying"
+          class="focus-marker"
+          transform="shrink-6 up-8 right-16"
+          icon="plus"
+        />
+      </FALayers>
     </a>
     <span
       v-if="status.replies_count > 0"
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 7700ee0d56..8804cc6b37 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -45,13 +45,20 @@
       class="button-unstyled interactive"
       target="_blank"
       role="button"
+      :title="$t('tool_tip.repeat')"
       :href="remoteInteractionLink"
     >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="retweet"
-        :title="$t('tool_tip.repeat')"
-      />
+      <FALayers class="fa-old-padding-layer">
+        <FAIcon
+          class="fa-scale-110"
+          icon="retweet"
+        />
+        <FAIcon
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="plus"
+        />
+      </FALayers>
     </a>
     <span
       v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"

From d1590311211cbf1036c870eef8c7e9e80fab7a3e Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 16:28:33 -0500
Subject: [PATCH 43/52] Add some aria to post status form

---
 src/components/emoji_input/emoji_input.vue           |  3 +++
 src/components/emoji_picker/emoji_picker.vue         |  1 +
 src/components/post_status_form/post_status_form.vue | 10 ++++++++++
 src/components/select/select.js                      |  3 ++-
 src/components/select/select.vue                     |  1 +
 src/i18n/en.json                                     |  2 ++
 6 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 4a7b0fa87c..7f9ecc998f 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -16,6 +16,7 @@
       ref="hiddenOverlay"
       class="hidden-overlay"
       :style="overlayStyle"
+      :aria-hidden="true"
     >
       <span>{{ preText }}</span>
       <span
@@ -33,6 +34,7 @@
         v-if="!hideEmojiButton"
         class="button-unstyled emoji-picker-icon"
         type="button"
+        :title="$t('emoji.add_emoji')"
         @click.prevent="togglePicker"
       >
         <FAIcon :icon="['far', 'smile-beam']" />
@@ -53,6 +55,7 @@
       ref="suggestorPopover"
       class="autocomplete-panel"
       placement="bottom"
+      :trigger-attrs="{ 'aria-hidden': true }"
     >
       <template #content>
         <div
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index ca90bf265f..6972164b02 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,6 +3,7 @@
     ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
+    :trigger-attrs="{ 'aria-hidden': true }"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 328e145f2e..64a8887cf9 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -30,6 +30,9 @@
           <span>{{ $t('post_status.scope_notice.public') }}</span>
           <a
             class="fa-scale-110 fa-old-padding dismiss"
+            :title="$t('post_status.scope_notice_dismiss')"
+            role="button"
+            tabindex="0"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -42,6 +45,9 @@
           <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
           <a
             class="fa-scale-110 fa-old-padding dismiss"
+            :title="$t('post_status.scope_notice_dismiss')"
+            role="button"
+            tabindex="0"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -54,6 +60,9 @@
           <span>{{ $t('post_status.scope_notice.private') }}</span>
           <a
             class="fa-scale-110 fa-old-padding dismiss"
+            :title="$t('post_status.scope_notice_dismiss')"
+            role="button"
+            tabindex="0"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -199,6 +208,7 @@
               id="post-content-type"
               v-model="newStatus.contentType"
               class="form-control"
+              :attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
             >
               <option
                 v-for="postFormat in postFormats"
diff --git a/src/components/select/select.js b/src/components/select/select.js
index ec571a14f9..34d64fd221 100644
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@@ -13,6 +13,7 @@ export default {
     'modelValue',
     'disabled',
     'unstyled',
-    'kind'
+    'kind',
+    'attrs'
   ]
 }
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 0ce4ea826d..1797afc889 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -6,6 +6,7 @@
     <select
       :disabled="disabled"
       :value="modelValue"
+      v-bind="attrs"
       @change="$emit('update:modelValue', $event.target.value)"
     >
       <slot />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ebd7d0af4b..d0965f8446 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -266,6 +266,7 @@
       "text/markdown": "Markdown",
       "text/bbcode": "BBCode"
     },
+    "content_type_selection": "Post format",
     "content_warning": "Subject (optional)",
     "default": "Just landed in L.A.",
     "direct_warning_to_all": "This post will be visible to all the mentioned users.",
@@ -283,6 +284,7 @@
       "private": "This post will be visible to your followers only",
       "unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
     },
+    "scope_notice_dismiss": "Close this notice",
     "scope": {
       "direct": "Direct - post to mentioned users only",
       "private": "Followers-only - post to followers only",

From 5f12c3ae76b82afd2040f2bcc83bf2eda5c4ff91 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 22:42:53 -0500
Subject: [PATCH 44/52] Fix unit tests

---
 test/unit/specs/components/emoji_input.spec.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js
index 752111efd7..03deece38b 100644
--- a/test/unit/specs/components/emoji_input.spec.js
+++ b/test/unit/specs/components/emoji_input.spec.js
@@ -14,7 +14,8 @@ const generateInput = (value, padEmoji = true) => {
               padEmoji
             }
           }
-        }
+        },
+        $t: (msg) => msg
       },
       stubs: {
         FAIcon: true

From ce8101e60a1dc1a768f793a34fb6e9cca70b4858 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 27 Sep 2022 18:47:50 -0400
Subject: [PATCH 45/52] Add remove follower confirmation

---
 .../account_actions/account_actions.js        | 20 +++++++++++++-
 .../account_actions/account_actions.vue       | 21 +++++++++++++++
 src/components/follow_card/follow_card.vue    |  1 +
 .../remove_follower_button.js                 | 27 +++++++++++++++++--
 .../remove_follower_button.vue                | 21 +++++++++++++++
 .../settings_modal/tabs/general_tab.vue       |  5 ++++
 src/i18n/en.json                              |  5 ++++
 src/modules/config.js                         |  1 +
 src/modules/instance.js                       |  1 +
 9 files changed, 99 insertions(+), 3 deletions(-)

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 7dec0c3d7c..acd93e0650 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -18,7 +18,8 @@ const AccountActions = {
   ],
   data () {
     return {
-      showingConfirmBlock: false
+      showingConfirmBlock: false,
+      showingConfirmRemoveFollower: false
     }
   },
   components: {
@@ -34,6 +35,12 @@ const AccountActions = {
     hideConfirmBlock () {
       this.showingConfirmBlock = false
     },
+    showConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = true
+    },
+    hideConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = false
+    },
     showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
     },
@@ -55,7 +62,15 @@ const AccountActions = {
       this.$store.dispatch('unblockUser', this.user.id)
     },
     removeUserFromFollowers () {
+      if (!this.shouldConfirmRemoveUserFromFollowers) {
+        this.doRemoveUserFromFollowers()
+      } else {
+        this.showConfirmRemoveUserFromFollowers()
+      }
+    },
+    doRemoveUserFromFollowers () {
       this.$store.dispatch('removeUserFromFollowers', this.user.id)
+      this.hideConfirmRemoveUserFromFollowers()
     },
     reportUser () {
       this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
@@ -71,6 +86,9 @@ const AccountActions = {
     shouldConfirmBlock () {
       return this.$store.getters.mergedConfig.modalOnBlock
     },
+    shouldConfirmRemoveUserFromFollowers () {
+      return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
+    },
     ...mapState({
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     })
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 161bab0999..ce19291a1d 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -95,6 +95,27 @@
         </i18n-t>
       </confirm-modal>
     </teleport>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmRemoveFollower"
+        :title="$t('user_card.remove_follower_confirm_title')"
+        :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
+        :cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
+        @accepted="doRemoveUserFromFollowers"
+        @cancelled="hideConfirmRemoveUserFromFollowers"
+      >
+        <i18n-t
+          keypath="user_card.remove_follower_confirm"
+          tag="span"
+        >
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
+      </confirm-modal>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index eff69fb237..bdb6b80927 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -24,6 +24,7 @@
         />
         <RemoveFollowerButton
           v-if="noFollowsYou && relationship.followed_by"
+          :user="user"
           :relationship="relationship"
           class="follow-card-button"
         />
diff --git a/src/components/remove_follower_button/remove_follower_button.js b/src/components/remove_follower_button/remove_follower_button.js
index e1a7531bfe..052a519ff2 100644
--- a/src/components/remove_follower_button/remove_follower_button.js
+++ b/src/components/remove_follower_button/remove_follower_button.js
@@ -1,10 +1,16 @@
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+
 export default {
-  props: ['relationship'],
+  props: ['user', 'relationship'],
   data () {
     return {
-      inProgress: false
+      inProgress: false,
+      showingConfirmRemoveFollower: false
     }
   },
+  components: {
+    ConfirmModal
+  },
   computed: {
     label () {
       if (this.inProgress) {
@@ -12,14 +18,31 @@ export default {
       } else {
         return this.$t('user_card.remove_follower')
       }
+    },
+    shouldConfirmRemoveUserFromFollowers () {
+      return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
     }
   },
   methods: {
+    showConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = true
+    },
+    hideConfirmRemoveUserFromFollowers () {
+      this.showingConfirmRemoveFollower = false
+    },
     onClick () {
+      if (!this.shouldConfirmRemoveUserFromFollowers) {
+        this.doRemoveUserFromFollowers()
+      } else {
+        this.showConfirmRemoveUserFromFollowers()
+      }
+    },
+    doRemoveUserFromFollowers () {
       this.inProgress = true
       this.$store.dispatch('removeUserFromFollowers', this.relationship.id).then(() => {
         this.inProgress = false
       })
+      this.hideConfirmRemoveUserFromFollowers()
     }
   }
 }
diff --git a/src/components/remove_follower_button/remove_follower_button.vue b/src/components/remove_follower_button/remove_follower_button.vue
index a3a4c24268..0012aebd13 100644
--- a/src/components/remove_follower_button/remove_follower_button.vue
+++ b/src/components/remove_follower_button/remove_follower_button.vue
@@ -7,6 +7,27 @@
     @click="onClick"
   >
     {{ label }}
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmRemoveFollower"
+        :title="$t('user_card.remove_follower_confirm_title')"
+        :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
+        :cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
+        @accepted="doRemoveUserFromFollowers"
+        @cancelled="hideConfirmRemoveUserFromFollowers"
+      >
+        <i18n-t
+          keypath="user_card.remove_follower_confirm"
+          tag="span"
+        >
+          <template #user>
+            <span
+              v-text="user.screen_name_ui"
+            />
+          </template>
+        </i18n-t>
+      </confirm-modal>
+    </teleport>
   </button>
 </template>
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 9de3ed81f3..703e94a0f5 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -191,6 +191,11 @@
                 {{ $t('settings.confirm_dialogs_deny_follow') }}
               </BooleanSetting>
             </li>
+            <li>
+              <BooleanSetting path="modalOnRemoveUserFromFollowers">
+                {{ $t('settings.confirm_dialogs_remove_follower') }}
+              </BooleanSetting>
+            </li>
           </ul>
         </li>
       </ul>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 213f9cf012..ca022c8213 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -429,6 +429,7 @@
     "confirm_dialogs_logout": "logging out",
     "confirm_dialogs_approve_follow": "approving a follower",
     "confirm_dialogs_deny_follow": "denying a follower",
+    "confirm_dialogs_remove_follower": "removing a follower",
     "mutes_and_blocks": "Mutes and Blocks",
     "data_import_export_tab": "Data import / export",
     "default_vis": "Default visibility scope",
@@ -964,6 +965,10 @@
     "per_day": "per day",
     "remote_follow": "Remote follow",
     "remove_follower": "Remove follower",
+    "remove_follower_confirm_title": "Remove follower confirmation",
+    "remove_follower_confirm_accept_button": "Remove",
+    "remove_follower_confirm_cancel_button": "Keep",
+    "remove_follower_confirm": "Do you really want to remove {user} from your followers?",
     "report": "Report",
     "statuses": "Statuses",
     "subscribe": "Subscribe",
diff --git a/src/modules/config.js b/src/modules/config.js
index 1df279a224..8e6b2c3de1 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -86,6 +86,7 @@ export const defaultState = {
   modalOnLogout: undefined, // instance default
   modalOnApproveFollow: undefined, // instance default
   modalOnDenyFollow: undefined, // instance default
+  modalOnRemoveUserFromFollowers: undefined, // instance default
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index fcb6eecc67..ce958907b0 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -79,6 +79,7 @@ const defaultState = {
   modalOnLogout: true,
   modalOnApproveFollow: false,
   modalOnDenyFollow: false,
+  modalOnRemoveUserFromFollowers: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',

From c7c68340f1c8838cead855de3f624e0796fbc6c7 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 15 Jan 2023 12:11:39 -0500
Subject: [PATCH 46/52] Fix mobile nav stylelint

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

diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6d826622aa..c2746abeee 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -247,10 +247,12 @@
       }
     }
   }
+
   .confirm-modal.dark-overlay {
     &::before {
       z-index: 3000;
     }
+
     .dialog-modal.panel {
       z-index: 3001;
     }

From dd97a23ce70fc564d3142eb9d218ff1a929107b1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 22 Jan 2023 11:15:52 -0500
Subject: [PATCH 47/52] Add birthday to registration form

---
 src/boot/after_store.js                      |  2 ++
 src/components/registration/registration.js  | 27 +++++++++++++++-
 src/components/registration/registration.vue | 34 ++++++++++++++++++++
 src/i18n/en.json                             |  8 +++--
 src/modules/instance.js                      |  2 ++
 5 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 1fa9dd2aa9..d2e7f488b5 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -60,6 +60,8 @@ const getInstanceConfig = async ({ store }) => {
 
       store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
       store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
+      store.dispatch('setInstanceOption', { name: 'birthdayRequired', value: !!data.pleroma.metadata.birthday_required })
+      store.dispatch('setInstanceOption', { name: 'birthdayMinAge', value: data.pleroma.metadata.birthday_min_age || 0 })
 
       if (vapidPublicKey) {
         store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 6eb316d096..3139bdd23f 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -3,6 +3,7 @@ import { required, requiredIf, sameAs } from '@vuelidate/validators'
 import { mapActions, mapState } from 'vuex'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
 import localeService from '../../services/locale/locale.service.js'
+import { DAY } from 'src/services/date_utils/date_utils.js'
 
 const registration = {
   setup () { return { v$: useVuelidate() } },
@@ -13,6 +14,7 @@ const registration = {
       username: '',
       password: '',
       confirm: '',
+      birthday: '',
       reason: '',
       language: ''
     },
@@ -32,6 +34,12 @@ const registration = {
           required,
           sameAs: sameAs(this.user.password)
         },
+        birthday: {
+          required: requiredIf(() => this.birthdayRequired),
+          maxValue: value => {
+            return !this.birthdayRequired || new Date(value).getTime() <= this.birthdayMin.getTime()
+          }
+        },
         reason: { required: requiredIf(() => this.accountApprovalRequired) },
         language: {}
       }
@@ -52,6 +60,21 @@ const registration = {
     reasonPlaceholder () {
       return this.replaceNewlines(this.$t('registration.reason_placeholder'))
     },
+    birthdayMin () {
+      const minAge = this.birthdayMinAge
+      const today = new Date()
+      today.setUTCMilliseconds(0)
+      today.setUTCSeconds(0)
+      today.setUTCMinutes(0)
+      today.setUTCHours(0)
+      const minDate = new Date()
+      minDate.setTime(today.getTime() - minAge * DAY)
+      return minDate
+    },
+    birthdayMinFormatted () {
+      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+      return this.user.birthday && new Date(Date.parse(this.birthdayMin)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
+    },
     ...mapState({
       registrationOpen: (state) => state.instance.registrationOpen,
       signedIn: (state) => !!state.users.currentUser,
@@ -59,7 +82,9 @@ const registration = {
       serverValidationErrors: (state) => state.users.signUpErrors,
       termsOfService: (state) => state.instance.tos,
       accountActivationRequired: (state) => state.instance.accountActivationRequired,
-      accountApprovalRequired: (state) => state.instance.accountApprovalRequired
+      accountApprovalRequired: (state) => state.instance.accountApprovalRequired,
+      birthdayRequired: (state) => state.instance.birthdayRequired,
+      birthdayMinAge: (state) => state.instance.birthdayMinAge
     })
   },
   methods: {
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index a26162f089..6d7fe76e6c 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -167,6 +167,40 @@
               </ul>
             </div>
 
+            <div
+              class="form-group"
+              :class="{ 'form-group--error': v$.user.birthday.$error }"
+            >
+              <label
+                class="form--label"
+                for="sign-up-birthday"
+              >
+                {{ birthdayRequired ? $t('registration.birthday') : $t('registration.birthday_optional') }}
+              </label>
+              <input
+                id="sign-up-birthday"
+                v-model="user.birthday"
+                :disabled="isPending"
+                class="form-control"
+                type="date"
+                max="birthdayMin"
+                :aria-required="birthdayRequired"
+              >
+            </div>
+            <div
+              v-if="v$.user.birthday.$dirty"
+              class="form-error"
+            >
+              <ul>
+                <li v-if="v$.user.birthday.required.$invalid">
+                  <span>{{ $t('registration.validations.birthday_required') }}</span>
+                </li>
+                <li v-if="v$.user.birthday.maxValue.$invalid">
+                  <span>{{ $tc('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
+                </li>
+              </ul>
+            </div>
+
             <div
               class="form-group"
               :class="{ 'form-group--error': v$.user.language.$error }"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1846c4c5fd..15d3bec49f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -312,9 +312,13 @@
       "email_required": "cannot be left blank",
       "password_required": "cannot be left blank",
       "password_confirmation_required": "cannot be left blank",
-      "password_confirmation_match": "should be the same as password"
+      "password_confirmation_match": "should be the same as password",
+      "birthday_required": "cannot be left blank",
+      "birthday_min_age": "must be on or before {date}"
     },
-    "email_language": "In which language do you want to receive emails from the server?"
+    "email_language": "In which language do you want to receive emails from the server?",
+    "birthday": "Birthday:",
+    "birthday_optional": "Birthday (optional):"
   },
   "remote_user_resolver": {
     "remote_user_resolver": "Remote user resolver",
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 8e8d13d3cc..72694e2cbf 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -107,6 +107,8 @@ const defaultState = {
   restrictedNicknames: [],
   safeDM: true,
   knownDomains: [],
+  birthdayRequired: false,
+  birthdayMinAge: 0,
 
   // Feature-set, apparently, not everything here is reported...
   shoutAvailable: false,

From 03d5c2e140fc70937d3533665fa88d055ab486f1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 22 Jan 2023 11:22:24 -0500
Subject: [PATCH 48/52] Make date picker aware of the birthday max value

---
 src/components/registration/registration.js  | 3 +++
 src/components/registration/registration.vue | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 3139bdd23f..22ca6ad621 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -71,6 +71,9 @@ const registration = {
       minDate.setTime(today.getTime() - minAge * DAY)
       return minDate
     },
+    birthdayMinAttr () {
+      return this.birthdayMin.toJSON().replace(/T.+$/, '')
+    },
     birthdayMinFormatted () {
       const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
       return this.user.birthday && new Date(Date.parse(this.birthdayMin)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 6d7fe76e6c..5701b05ee6 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -183,7 +183,7 @@
                 :disabled="isPending"
                 class="form-control"
                 type="date"
-                max="birthdayMin"
+                :max="birthdayRequired ? birthdayMinAttr : undefined"
                 :aria-required="birthdayRequired"
               >
             </div>

From 817432bd62c781d25ad407eeec89909e5a9b4d61 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 25 Jan 2023 19:01:29 -0500
Subject: [PATCH 49/52] Fix stylelint

---
 .../interface_language_switcher/interface_language_switcher.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index c9e7506b17..a57e876175 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -102,7 +102,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .interface-language-switcher {
   .language-select {

From 31c9b6885bf42993e328ed54be8dce95cccdcc91 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Fri, 27 Jan 2023 09:08:38 +0000
Subject: [PATCH 50/52] Update dependency babel-loader to v9.1.2

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 557672ea6e..82b6f6f10d 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "@vue/compiler-sfc": "3.2.45",
     "@vue/test-utils": "2.2.7",
     "autoprefixer": "10.4.13",
-    "babel-loader": "9.1.0",
+    "babel-loader": "9.1.2",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.3.7",
     "chalk": "1.1.3",
diff --git a/yarn.lock b/yarn.lock
index 85a8155f3f..803556e650 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2603,10 +2603,10 @@ axios@^1.1.3:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-babel-loader@9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.0.tgz#839e9ae88aea930864ef9ec0f356dfca96ecf238"
-  integrity sha512-Antt61KJPinUMwHwIIz9T5zfMgevnfZkEVWYDWlG888fgdvRRGD0JTuf/fFozQnfT+uq64sk1bmdHDy/mOEWnA==
+babel-loader@9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
+  integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
   dependencies:
     find-cache-dir "^3.3.2"
     schema-utils "^4.0.0"

From ec0b239496801bf03391c1ad181545ae738cc40b Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Fri, 27 Jan 2023 09:09:34 +0000
Subject: [PATCH 51/52] Update dependency punycode.js to v2.3.0

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 557672ea6e..008db4cea2 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "localforage": "1.10.0",
     "parse-link-header": "2.0.0",
     "phoenix": "1.6.2",
-    "punycode.js": "2.1.0",
+    "punycode.js": "2.3.0",
     "qrcode": "1.5.0",
     "querystring-es3": "0.2.1",
     "url": "0.11.0",
diff --git a/yarn.lock b/yarn.lock
index 85a8155f3f..cd729dc885 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7322,10 +7322,10 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-punycode.js@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.1.0.tgz#f3937f7a914152c2dc17e9c280a2cf86a26b7cda"
-  integrity sha512-LvGUJ9QHiESLM4yn8JuJWicstRcJKRmP46psQw1HvCZ9puLFwYMKJWvkAkP3OHBVzNzZGx/D53EYJrIaKd9gZQ==
+punycode.js@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.0.tgz#6aaa35964ffecc676545995ecb65980bd8302f61"
+  integrity sha512-AM9kSplQQCRlRkRZzx2EcqW2AQ9HuYoUzzl/tjJDNJEUeYHFGJ/rGE0a9cE1b41iuFz94pAwcEekC137Dd9Eyw==
 
 punycode@1.3.2:
   version "1.3.2"

From d2716341cba55c1b40793239501213d00f5b6281 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Sun, 29 Jan 2023 09:07:16 +0000
Subject: [PATCH 52/52] Update dependency @vue/test-utils to v2.2.8

---
 package.json |  2 +-
 yarn.lock    | 96 +++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 92 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index df15f5775f..651887c47e 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "3.2.45",
-    "@vue/test-utils": "2.2.7",
+    "@vue/test-utils": "2.2.8",
     "autoprefixer": "10.4.13",
     "babel-loader": "9.1.2",
     "babel-plugin-lodash": "3.3.4",
diff --git a/yarn.lock b/yarn.lock
index 5693c2aea3..bce4846535 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2172,10 +2172,12 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
   integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
 
-"@vue/test-utils@2.2.7":
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.2.7.tgz#0d93d635031a4cca2de70b825aef3fe20a41e702"
-  integrity sha512-BMuoruUFTEqhLoOgsMcgNVMiByYbfHCKGr2C4CPdGtz/affUtDVX5zr1RnPuq0tYSiaqq+Enw5voUpG6JY8Q7g==
+"@vue/test-utils@2.2.8":
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.2.8.tgz#2002a2b2c90309f66c5c175b735621438832a610"
+  integrity sha512-/R8DKzp41Ip/RqTt1jvOVi5gxby3EwNWiYHNYsG9FAjEvt0gzDvYN55lCKzX7IdnI5zVIOo5tHtts0SLT+JrWw==
+  dependencies:
+    js-beautify "1.14.6"
 
 "@vuelidate/core@2.0.0":
   version "2.0.0"
@@ -2325,6 +2327,11 @@ abab@^2.0.5, abab@^2.0.6:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
+abbrev@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
 accepts@~1.3.4:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -3135,7 +3142,7 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.20.0:
+commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3168,6 +3175,14 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
+config-chain@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
+  integrity sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==
+  dependencies:
+    ini "^1.3.4"
+    proto-list "~1.2.1"
+
 connect-history-api-fallback@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz#647264845251a0daf25b97ce87834cace0f5f1c8"
@@ -3731,6 +3746,16 @@ dotenv@10.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
   integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
 
+editorconfig@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
+  dependencies:
+    commander "^2.19.0"
+    lru-cache "^4.1.5"
+    semver "^5.6.0"
+    sigmund "^1.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -4661,6 +4686,17 @@ glob@^7.2.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
 global-modules@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -5077,6 +5113,11 @@ inherits@2.0.4, inherits@^2.0.4:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+ini@^1.3.4:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
+
 ini@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
@@ -5475,6 +5516,16 @@ jest-worker@^29.1.2:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+js-beautify@1.14.6:
+  version "1.14.6"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.14.6.tgz#b23ca5d74a462c282c7711bb51150bcc97f2b507"
+  integrity sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==
+  dependencies:
+    config-chain "^1.1.13"
+    editorconfig "^0.15.3"
+    glob "^8.0.3"
+    nopt "^6.0.0"
+
 js-cookie@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
@@ -6110,6 +6161,14 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lru-cache@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -6541,6 +6600,13 @@ node-releases@^2.0.5, node-releases@^2.0.6:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
   integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
+nopt@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-6.0.0.tgz#245801d8ebf409c6df22ab9d95b65e1309cdb16d"
+  integrity sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==
+  dependencies:
+    abbrev "^1.0.0"
+
 normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -7293,6 +7359,11 @@ process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
 
+proto-list@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+  integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -7310,6 +7381,11 @@ prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
 
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@@ -7881,6 +7957,11 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+sigmund@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  integrity sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==
+
 signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -9043,6 +9124,11 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
+
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"