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

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

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index dd45b6b9..34f4ccd8 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,
@@ -25,15 +26,35 @@ library.add(
 )
 
 const ExtraButtons = {
-  props: [ 'status' ],
-  components: { Popover },
+  props: ['status'],
+  components: {
+    Popover,
+    ConfirmModal
+  },
+  data () {
+    return {
+      expanded: false,
+      showingDeleteDialog: false
+    }
+  },
   methods: {
     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'))
@@ -91,6 +112,9 @@ const ExtraButtons = {
     },
     statusLink () {
       return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
+    },
+    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 a3c3c767..4eb566a3 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -125,6 +125,16 @@
           icon="ellipsis-h"
         />
       </button>
+      <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 5b60520b..5f4e9533 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -81,6 +81,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 faa8692a..504fc68a 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -38,6 +38,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',
-- 
2.34.1


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

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

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 4f5a5bc7..4b35a06e 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -172,6 +172,88 @@
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="listsNavigation">
+            {{ $t('settings.lists_navigation') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <h3>{{ $t('settings.columns') }}</h3>
+        </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sidebarRight">
+            {{ $t('settings.right_sidebar') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            v-if="user"
+            id="thirdColumnMode"
+            path="thirdColumnMode"
+            :options="thirdColumnModeOptions"
+          >
+            {{ $t('settings.third_column_mode') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="expertLevel > 0">
+          {{ $t('settings.column_sizes') }}
+          <div class="column-settings">
+            <SizeSetting
+              v-for="column in columns"
+              :key="column"
+              :path="column + 'ColumnWidth'"
+              :units="horizontalUnits"
+              expert="1"
+            >
+              {{ $t('settings.column_sizes_' + column) }}
+            </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">
-- 
2.34.1


From c63b55d0251175d9dff9dfa16536f53e0cf871bb Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:49:39 -0500
Subject: [PATCH 03/23] 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 4f71af0a..9dc4d091 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 } from '@fortawesome/free-solid-svg-icons'
 
@@ -5,13 +6,24 @@ library.add(faRetweet)
 
 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 {
@@ -21,6 +33,13 @@ const RetweetButton = {
       setTimeout(() => {
         this.animated = false
       }, 500)
+      this.hideConfirmDialog()
+    },
+    showConfirmDialog () {
+      this.showingConfirmDialog = true
+    },
+    hideConfirmDialog () {
+      this.showingConfirmDialog = false
     }
   },
   computed: {
@@ -29,6 +48,9 @@ const RetweetButton = {
     },
     mergedConfig () {
       return this.$store.getters.mergedConfig
+    },
+    shouldConfirmRepeat () {
+      return this.mergedConfig.modalOnRepeat
     }
   }
 }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index e8a77e10..7a71add1 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -33,6 +33,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>
 
-- 
2.34.1


From a2bffbf07623c0d2ff1aa77cc267804078b1fbad Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:50:04 -0500
Subject: [PATCH 04/23] 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 3edbcb86..0a74a7a1 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 965d5256..4fc2233a 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>
-- 
2.34.1


From 60078ea734ca5af255cad246ef5bb4bc255f7a9b Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 15:50:25 -0500
Subject: [PATCH 05/23] 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 00000000..bb5e9d97
--- /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 00000000..250a6984
--- /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>
-- 
2.34.1


From dba8dcc41ad88fcd0ffd11ec8e662194fee50475 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:21:19 -0500
Subject: [PATCH 06/23] 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 ef898f96..97e619a2 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -6,6 +6,7 @@ import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
 import Select from '../select/select.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'
@@ -32,7 +33,8 @@ export default {
   data () {
     return {
       followRequestInProgress: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+      showingConfirmMute: false
     }
   },
   created () {
@@ -113,6 +115,9 @@ export default {
     hideFollowersCount () {
       return this.isOtherUser && this.user.hide_followers_count
     },
+    shouldConfirmMute () {
+      return this.mergedConfig.modalOnMute
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
@@ -123,14 +128,29 @@ export default {
     ProgressButton,
     FollowButton,
     Select,
-    RichContent
+    RichContent,
+    ConfirmModal
   },
   methods: {
     refetchRelationship () {
       return this.$store.dispatch('fetchUserRelationship', this.user.id)
     },
+    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 0f776e55..21532686 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -295,6 +295,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>
 
-- 
2.34.1


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

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

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 8fe0fe5e..2a40c81c 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -1,5 +1,6 @@
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
@@ -14,13 +15,22 @@ const AccountActions = {
     'user', 'relationship'
   ],
   data () {
-    return { }
+    return {
+      showingConfirmBlock: false
+    }
   },
   components: {
     ProgressButton,
-    Popover
+    Popover,
+    ConfirmModal
   },
   methods: {
+    showConfirmBlock () {
+      this.showingConfirmBlock = true
+    },
+    hideConfirmBlock () {
+      this.showingConfirmBlock = false
+    },
     showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
     },
@@ -28,7 +38,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)
@@ -36,6 +54,14 @@ const AccountActions = {
     reportUser () {
       this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
     }
+  },
+  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 afd8bb1b..63d586f3 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -59,6 +59,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>
 
-- 
2.34.1


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

---
 .../confirm_modal/confirm_modal.vue           |  1 +
 src/components/desktop_nav/desktop_nav.js     | 12 ++++++---
 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, 62 insertions(+), 6 deletions(-)

diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 250a6984..fa354285 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 3307b5d5..9ba5abc4 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,
@@ -38,7 +39,8 @@ library.add(
 
 export default {
   components: {
-    SearchBar
+    SearchBar,
+    ConfirmModal
   },
   data: () => ({
     searchBarHidden: true,
@@ -48,7 +50,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 },
@@ -92,7 +95,10 @@ 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 () {
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 25b4fe8e..cdf33fac 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -167,6 +167,16 @@
         </a>
       </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 7a356921..0d4f6f3b 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 { library } from '@fortawesome/fontawesome-svg-core'
@@ -18,11 +19,13 @@ library.add(
 const MobileNav = {
   components: {
     SideDrawer,
-    Notifications
+    Notifications,
+    ConfirmModal
   },
   data: () => ({
     notificationsCloseGesture: undefined,
-    notificationsOpen: false
+    notificationsOpen: false,
+    showingConfirmLogout: false
   }),
   created () {
     this.notificationsCloseGesture = GestureService.swipeGesture(
@@ -47,7 +50,11 @@ const MobileNav = {
     hideSiteName () {
       return this.mergedConfig.hideSiteName
     },
-    sitename () { return this.$store.state.instance.name }
+    sitename () { return this.$store.state.instance.name },
+    shouldConfirmLogout () {
+      return this.$store.getters.mergedConfig.modalOnLogout
+    },
+    ...mapGetters(['unreadChatCount'])
   },
   methods: {
     toggleMobileSidebar () {
@@ -73,9 +80,23 @@ const MobileNav = {
     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()
     },
     markNotificationsAsSeen () {
       // this.$refs.notifications.markAsSeen()
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 308c8d57..7dc343c6 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -76,6 +76,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>
 
@@ -206,6 +216,14 @@
       }
     }
   }
+  .confirm-modal.dark-overlay {
+    &::before {
+      z-index: 3000;
+    }
+    .dialog-modal.panel {
+      z-index: 3001;
+    }
+  }
 }
 
 </style>
-- 
2.34.1


From 8be3c46bccf3df19ec31ad35c34cd3a83f0bef34 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 17:03:17 -0500
Subject: [PATCH 09/23] 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 fa354285..59e46dc1 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 0a74a7a1..443aa9bc 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: {
-- 
2.34.1


From c77e3c31ed8e03576c1035ed9580bc3b3f169f75 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 11 Feb 2022 10:18:20 -0500
Subject: [PATCH 10/23] 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 cdf33fac..0f8c7824 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -169,7 +169,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 7dc343c6..ecf9ee17 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -78,7 +78,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"
-- 
2.34.1


From 97fba09fd25d82a94b109115bb0c17da68c75cdb Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 17 Mar 2022 00:06:26 -0400
Subject: [PATCH 11/23] 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           | 24 ++++----
 .../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, 115 insertions(+), 109 deletions(-)

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 63d586f3..a7692635 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -59,24 +59,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 bb5e9d97..96ddc118 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 59e46dc1..5b5014c5 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 0f8c7824..65a690a4 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -167,16 +167,18 @@
         </a>
       </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 4eb566a3..df28ae57 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -124,17 +124,19 @@
           class="fa-scale-110 fa-old-padding"
           icon="ellipsis-h"
         />
-      </button>
-      <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>
+      </span>
+      <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 4fc2233a..5c799406 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 ecf9ee17..da1b4b12 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -76,16 +76,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 7a71add1..162dc48a 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -33,16 +33,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 21532686..ba9cf014 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -295,24 +295,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>
 
-- 
2.34.1


From 4984d9737965733271ba6e08264088fc640ec8de Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 14:54:58 -0400
Subject: [PATCH 12/23] 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 a7692635..94c74779 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -59,7 +59,7 @@
         </button>
       </template>
     </Popover>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmBlock"
         :title="$t('user_card.block_confirm_title')"
@@ -78,7 +78,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 65a690a4..32e3c73f 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -167,7 +167,7 @@
         </a>
       </div>
     </div>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
@@ -178,7 +178,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 df28ae57..8ef677bb 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -125,7 +125,7 @@
           icon="ellipsis-h"
         />
       </span>
-      <portal to="modal">
+      <teleport to="#modal">
         <ConfirmModal
           v-if="showingDeleteDialog"
           :title="$t('status.delete_confirm_title')"
@@ -136,7 +136,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 5c799406..b4567348 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 da1b4b12..e6a8e694 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -76,7 +76,7 @@
       ref="sideDrawer"
       :logout="logout"
     />
-    <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>
   </div>
 </template>
 
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 162dc48a..6bb7a283 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -33,7 +33,7 @@
     >
       {{ status.repeat_num }}
     </span>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmDialog"
         :title="$t('status.repeat_confirm_title')"
@@ -44,7 +44,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 ba9cf014..477ed86d 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -295,7 +295,7 @@
         :handle-links="true"
       />
     </div>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmMute"
         :title="$t('user_card.mute_confirm_title')"
@@ -314,7 +314,7 @@
           />
         </i18n>
       </confirm-modal>
-    </portal>
+    </teleport>
   </div>
 </template>
 
-- 
2.34.1


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

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

diff --git a/index.html b/index.html
index 40db0bbe..f7e2de46 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,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 -->
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index c3cf33f8..ed4f318e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,7 +59,7 @@
     <UserReportingModal />
     <PostStatusModal />
     <SettingsModal />
-    <div id="modal" />
+    <UpdateNotification />
     <GlobalNoticeList />
   </div>
 </template>
-- 
2.34.1


From d14316fd164b57f8a5c3ace2f82bc5cae945e763 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 15:05:09 -0400
Subject: [PATCH 14/23] 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 06b270c3..1a42b0e5 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: rgba(27,31,35,.5);
-    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;
-- 
2.34.1


From 91b4737196bd88b859a6ee56e89d3c1a9babecc7 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 9 Apr 2022 23:11:19 -0400
Subject: [PATCH 15/23] 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 5b5014c5..1ac64b62 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"
   >
-- 
2.34.1


From 4d9edf4bfb9647f82f54bbeeabff4dda35bef1be Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 9 Apr 2022 23:26:27 -0400
Subject: [PATCH 16/23] 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 94c74779..e29db83a 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -68,15 +68,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 b4567348..e421c15b 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 477ed86d..c04250aa 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -304,15 +304,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>
-- 
2.34.1


From 0cb3d2359e7de5eaa504e2f22aa3ad0bea276f8a Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 9 Apr 2022 23:32:15 -0400
Subject: [PATCH 17/23] 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 f7e2de46..1b1385de 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,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 -->
   </body>
 </html>
-- 
2.34.1


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

---
 .../follow_request_card.js                    | 49 ++++++++++++++++++-
 .../follow_request_card.vue                   | 22 +++++++++
 src/components/notification/notification.js   | 46 ++++++++++++++++-
 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, 150 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 cbd75311..b0873bb1 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 1b12ba4b..835471e7 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 398bb7a9..f26f6686 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -5,6 +5,8 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.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'
@@ -36,7 +38,9 @@ const Notification = {
     return {
       userExpanded: false,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter,
-      unmuted: false
+      unmuted: false,
+      showingApproveConfirmDialog: false,
+      showingDenyConfirmDialog: false
     }
   },
   props: [ 'notification' ],
@@ -46,7 +50,10 @@ const Notification = {
     UserCard,
     Timeago,
     Status,
-    RichContent
+    Report,
+    RichContent,
+    UserPopover,
+    ConfirmModal
   },
   methods: {
     toggleUserExpanded () {
@@ -61,7 +68,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 })
@@ -73,6 +99,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 })
@@ -107,6 +140,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 72e31a0c..76101865 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -231,6 +231,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>
   </div>
 </template>
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 4b35a06e..3d58f2bf 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -252,6 +252,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 5f4e9533..f97e5a8f 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -87,6 +87,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 504fc68a..f9118e16 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -44,6 +44,8 @@ const defaultState = {
   modalOnMute: false,
   modalOnDelete: true,
   modalOnLogout: true,
+  modalOnApproveFollow: false,
+  modalOnDenyFollow: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',
-- 
2.34.1


From d84212baa89763fb6ef19e43a9c10aea3f62ced2 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 10 Jun 2022 15:55:31 -0400
Subject: [PATCH 19/23] 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 f26f6686..0507459c 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -97,6 +97,7 @@ const Notification = {
           notification.type = 'follow'
         }
       })
+      this.hideApproveConfirmDialog()
     },
     denyUser () {
       if (this.shouldConfirmDeny) {
@@ -111,6 +112,7 @@ const Notification = {
           this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
           this.$store.dispatch('removeFollowRequest', this.user)
         })
+      this.hideDenyConfirmDialog()
     }
   },
   computed: {
-- 
2.34.1


From 258ad13ec1a02e101754f1c8679e3fcd277eb629 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 1 Aug 2022 11:02:21 -0400
Subject: [PATCH 20/23] 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 1ac64b62..3b98174a 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"
-- 
2.34.1


From 6adefc561994032f833af691efa6d2da60744533 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Fri, 26 Aug 2022 12:43:22 +0100
Subject: [PATCH 21/23] add default translation keys

---
 .../account_actions/account_actions.js        |  1 +
 .../account_actions/account_actions.vue       |  2 +-
 .../confirm_modal/confirm_modal.vue           | 22 ++++++++---
 src/components/extra_buttons/extra_buttons.js |  2 +-
 .../extra_buttons/extra_buttons.vue           |  2 +-
 src/components/mobile_nav/mobile_nav.js       |  1 +
 src/components/notification/notification.js   |  3 --
 .../settings_modal/tabs/general_tab.vue       | 24 ------------
 src/i18n/en.json                              | 38 ++++++++++++++++++-
 9 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 2a40c81c..c227c409 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -2,6 +2,7 @@ import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { mapState } from 'vuex'
 import {
   faEllipsisV
 } from '@fortawesome/free-solid-svg-icons'
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index e29db83a..3e65aa62 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -72,7 +72,7 @@
           keypath="user_card.block_confirm"
           tag="span"
         >
-          <template #user>
+          <template v-slot:user>
             <span
               v-text="user.screen_name_ui"
             />
diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 3b98174a..5783c794 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -11,19 +11,29 @@
     <slot />
 
     <template #footer>
-      <button
-        class="btn button-default"
-        @click.prevent="onAccept"
-        v-text="confirmText"
-      />
-
       <button
         class="btn button-default"
         @click.prevent="onCancel"
         v-text="cancelText"
       />
+      <button
+        class="btn button-default button-positive"
+        @click.prevent="onAccept"
+        v-text="confirmText"
+      />
     </template>
   </dialog-modal>
 </template>
 
+<style lang="scss" scoped>
+@import '../../_variables';
+
+.confirm-modal {
+  .button-positive {
+    border: 3px solid var(--accent, $fallback--link);
+    border-radius: var(--btnRadius, $fallback--btnRadius);
+  }
+}
+</style>
+
 <script src="./confirm_modal.js"></script>
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 34f4ccd8..f7045110 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -47,7 +47,7 @@ const ExtraButtons = {
     },
     doDeleteStatus () {
       this.$store.dispatch('deleteStatus', { id: this.status.id })
-      hideDeleteStatusConfirmDialog()
+      this.hideDeleteStatusConfirmDialog()
     },
     showDeleteStatusConfirmDialog () {
       this.showingDeleteDialog = true
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 8ef677bb..2b574bbd 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -124,7 +124,7 @@
           class="fa-scale-110 fa-old-padding"
           icon="ellipsis-h"
         />
-      </span>
+      </button>
       <teleport to="#modal">
         <ConfirmModal
           v-if="showingDeleteDialog"
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 0d4f6f3b..bba520d4 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -3,6 +3,7 @@ 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 { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 0507459c..af612ccb 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -5,7 +5,6 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.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'
@@ -50,9 +49,7 @@ const Notification = {
     UserCard,
     Timeago,
     Status,
-    Report,
     RichContent,
-    UserPopover,
     ConfirmModal
   },
   methods: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 3d58f2bf..03838eb1 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -172,11 +172,6 @@
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="listsNavigation">
-            {{ $t('settings.lists_navigation') }}
-          </BooleanSetting>
-        </li>
         <li>
           <h3>{{ $t('settings.columns') }}</h3>
         </li>
@@ -205,20 +200,6 @@
             {{ $t('settings.third_column_mode') }}
           </ChoiceSetting>
         </li>
-        <li v-if="expertLevel > 0">
-          {{ $t('settings.column_sizes') }}
-          <div class="column-settings">
-            <SizeSetting
-              v-for="column in columns"
-              :key="column"
-              :path="column + 'ColumnWidth'"
-              :units="horizontalUnits"
-              expert="1"
-            >
-              {{ $t('settings.column_sizes_' + column) }}
-            </SizeSetting>
-          </div>
-        </li>
         <li class="select-multiple">
           <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
           <ul class="option-list">
@@ -247,11 +228,6 @@
                 {{ $t('settings.confirm_dialogs_delete') }}
               </BooleanSetting>
             </li>
-            <li>
-              <BooleanSetting path="modalOnLogout">
-                {{ $t('settings.confirm_dialogs_logout') }}
-              </BooleanSetting>
-            </li>
             <li>
               <BooleanSetting path="modalOnApproveFollow">
                 {{ $t('settings.confirm_dialogs_approve_follow') }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 84e4a185..fc12eef9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -394,7 +394,16 @@
         "chatMessageRadius": "Chat message",
         "checkboxRadius": "Checkboxes",
         "collapse_subject": "Collapse posts with subjects",
+        "columns": "Columns",
         "composing": "Composing",
+        "confirm_dialogs": "Require confirmation for:",
+        "confirm_dialogs_repeat": "Repeating a post",
+        "confirm_dialogs_unfollow": "Unfollowing someone",
+        "confirm_dialogs_block": "Blocking someone",
+        "confirm_dialogs_mute": "Muting someone",
+        "confirm_dialogs_delete": "Deleting a post",
+        "confirm_dialogs_approve_follow": "Accepting a follow request",
+        "confirm_dialogs_deny_follow": "Rejecting a follow request",
         "confirm_new_password": "Confirm new password",
         "conversation_display": "Conversation display style",
         "conversation_display_linear": "Linear-style",
@@ -819,6 +828,9 @@
         "copy_link": "Copy link to post",
         "delete": "Delete post",
         "delete_confirm": "Do you really want to delete this post?",
+        "delete_confirm_title": "Confirm deletion",
+        "delete_confirm_accept_button": "Yes, delete it",
+        "delete_confirm_cancel_button": "No, keep it",
         "expand": "Expand",
         "external_source": "External source",
         "favorites": "Favorites",
@@ -840,6 +852,10 @@
         "replies_list": "Replies:",
         "replies_list_with_others": "Replies (+{numReplies} other): | Replies (+{numReplies} others):",
         "reply_to": "Reply to",
+        "repeat_confirm": "Do you really want to repeat this post?",
+        "repeat_confirm_title": "Confirm repeat",
+        "repeat_confirm_accept_button": "Yes, repeat it",
+        "repeat_confirm_cancel_button": "No, don't repeat",
         "show_all_attachments": "Show all attachments",
         "show_all_conversation": "Show full conversation ({numStatus} other post) | Show full conversation ({numStatus} other posts)",
         "show_all_conversation_with_icon": "{icon} {text}",
@@ -948,12 +964,24 @@
             "strip_media": "Remove media from posts"
         },
         "approve": "Approve",
+        "approve_confirm_title": "Approve follow request",
+        "approve_confirm": "Are you sure you want to let this user follow you?",
+        "approve_confirm_accept_button": "Yes, accept",
+        "approve_confirm_cancel_button": "No, cancel",
         "block": "Block",
+        "block_confirm": "Are you sure you want to block {user}?",
+        "block_confirm_title": "Block user",
+        "block_confirm_cancel_button": "No, don't block",
+        "block_confirm_accept_button": "Yes, block",
         "block_progress": "Blocking…",
         "blocked": "Blocked!",
         "bot": "Bot",
         "deactivated": "Deactivated",
         "deny": "Deny",
+        "deny_confirm_title": "Deny follow request",
+        "deny_confirm": "Are you sure you want to deny this user's follow request?",
+        "deny_confirm_accept_button": "Yes, deny",
+        "deny_confirm_cancel_button": "No, cancel",
         "domain_muted": "Unblock domain",
         "edit_profile": "Edit profile",
         "favorites": "Favorites",
@@ -979,6 +1007,10 @@
         "mention": "Mention",
         "message": "Message",
         "mute": "Mute",
+        "mute_confirm": "Are you sure you want to mute {user}?",
+        "mute_confirm_title": "Mute user",
+        "mute_confirm_cancel_button": "No, don't mute",
+        "mute_confirm_accept_button": "Yes, mute",
         "mute_domain": "Block domain",
         "mute_progress": "Muting…",
         "muted": "Muted",
@@ -991,9 +1023,13 @@
         "subscribe": "Subscribe",
         "unblock": "Unblock",
         "unblock_progress": "Unblocking…",
+        "unfollow_confirm": "Are you sure you want to unfollow {user}?",
+        "unfollow_confirm_title": "Unfollow user",
+        "unfollow_confirm_cancel_button": "No, don't unfollow",
+        "unfollow_confirm_accept_button": "Yes, unfollow",
         "unmute": "Unmute",
         "unmute_progress": "Unmuting…",
-        "unsubscribe": "Unsubscribe"
+        "unsubscribe": "Unsubscribe",
     },
     "user_profile": {
         "profile_does_not_exist": "Sorry, this profile does not exist.",
-- 
2.34.1


From b18da01ef7ed51473bd256d49e1e3d7507dea7c2 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Fri, 26 Aug 2022 12:45:39 +0100
Subject: [PATCH 22/23] add title for confirmation

---
 src/components/settings_modal/tabs/general_tab.vue | 3 +++
 src/i18n/en.json                                   | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 03838eb1..1e696d1a 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -200,6 +200,9 @@
             {{ $t('settings.third_column_mode') }}
           </ChoiceSetting>
         </li>
+        <li>
+          <h3>{{ $t('settings.confirmation_dialogs') }}</h3>
+        </li>
         <li class="select-multiple">
           <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
           <ul class="option-list">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index fc12eef9..155cf120 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -396,6 +396,7 @@
         "collapse_subject": "Collapse posts with subjects",
         "columns": "Columns",
         "composing": "Composing",
+        "confirmation_dialogs": "Confirmation options",
         "confirm_dialogs": "Require confirmation for:",
         "confirm_dialogs_repeat": "Repeating a post",
         "confirm_dialogs_unfollow": "Unfollowing someone",
-- 
2.34.1


From 738837bdc176497c5703a3e4548b1f899ecf68d8 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Fri, 26 Aug 2022 12:54:48 +0100
Subject: [PATCH 23/23] fix json

---
 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 155cf120..7d845ca4 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1030,7 +1030,7 @@
         "unfollow_confirm_accept_button": "Yes, unfollow",
         "unmute": "Unmute",
         "unmute_progress": "Unmuting…",
-        "unsubscribe": "Unsubscribe",
+        "unsubscribe": "Unsubscribe"
     },
     "user_profile": {
         "profile_does_not_exist": "Sorry, this profile does not exist.",
-- 
2.34.1