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: Add delete status confirm modal

---
 src/components/extra_buttons/extra_buttons.js  | 31 +++++++++++++++++++++-----
 src/components/extra_buttons/extra_buttons.vue | 10 +++++++++
 2 files changed, 35 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 3dc968c9..b1458d30 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 a84d47f6..293f6d68 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>
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index b1458d30..48b960b2 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 1ee1147a..b2bec692 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:",
-- 
cgit v1.2.3-70-g09d2


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: Add setting entries for whether to show confirmation dialogs

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

(limited to 'src/components')

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 582cb288..906c3758 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">
-- 
cgit v1.2.3-70-g09d2


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: Add confirmation for repeating

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

(limited to 'src/components')

diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 4d92b5fa..198b6c14 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 7700ee0d..38d4dc3f 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>
 
-- 
cgit v1.2.3-70-g09d2


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: Add confirmation for following

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

(limited to 'src/components')

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>
-- 
cgit v1.2.3-70-g09d2


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: Add ConfirmModal comp

---
 src/components/confirm_modal/confirm_modal.js  | 42 ++++++++++++++++++++++++++
 src/components/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

(limited to 'src/components')

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>
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components')

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 67879307..1bcc4341 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 349c7cb1..fac900a9 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>
 
-- 
cgit v1.2.3-70-g09d2


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: Add confirmation for blocking

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

(limited to 'src/components')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index c23407f9..7dec0c3d 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 973a5935..dfe1f706 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>
 
-- 
cgit v1.2.3-70-g09d2


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: Add confirmation for logout

---
 src/components/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(-)

(limited to 'src/components')

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 08c0e44e..745b1a81 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 07bf8005..7db94a37 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 cdbbb812..dad1f6aa 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 d6fe102c..de97624b 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>
-- 
cgit v1.2.3-70-g09d2


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: Lint

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

(limited to 'src/components')

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: {
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components')

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 7db94a37..0f5b3136 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 de97624b..0f23b7ac 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"
-- 
cgit v1.2.3-70-g09d2


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: Use portal for modals

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

(limited to 'src/components')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index dfe1f706..273aac69 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 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 0f5b3136..18630385 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 293f6d68..4641947a 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 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 0f23b7ac..6b6b8f21 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 38d4dc3f..9ed24bd5 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 fac900a9..5a848ead 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>
 
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 273aac69..fc303271 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 18630385..92622cf9 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 4641947a..c1c15c0f 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 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 6b6b8f21..6d826622 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 9ed24bd5..134fcb36 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 5a848ead..856ed54b 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>
 
-- 
cgit v1.2.3-70-g09d2


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: Make modal display over the top bar

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

(limited to 'src/components')

diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 24d65142..341cf105 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;
-- 
cgit v1.2.3-70-g09d2


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: 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(+)

(limited to 'src/components')

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"
   >
-- 
cgit v1.2.3-70-g09d2


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: Make confirm dialogs work with vue-i18n 9

---
 src/components/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(-)

(limited to 'src/components')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index fc303271..161bab09 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 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 856ed54b..01882aa8 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>
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components')

diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index e30645c3..a2070155 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 1bcc4341..e17bf8eb 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 d56b6672..4ab93a8a 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 01882aa8..2de14063 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 053e44b6..a1316ba2 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 af12265e..c7a36af9 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 c93d2176..ed8e1417 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
+  }
+}
-- 
cgit v1.2.3-70-g09d2


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: Add confirm dialogs for accept & deny follow requests

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

(limited to 'src/components')

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 eb222cc7..55b65112 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 265aaee0..0ce8892e 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 f1aa5420..e1ea42ad 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 906c3758..9de3ed81 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 a8949030..1df279a2 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 6fc3830c..fcb6eecc 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',
-- 
cgit v1.2.3-70-g09d2


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: Auto close confirm dialog after approve/deny

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

(limited to 'src/components')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 0ce8892e..420db4f0 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: {
-- 
cgit v1.2.3-70-g09d2


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: Fix confirm modal lint

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

(limited to 'src/components')

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"
-- 
cgit v1.2.3-70-g09d2


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: Add remove follower confirmation

---
 src/components/account_actions/account_actions.js  | 20 +++++++++++++++-
 src/components/account_actions/account_actions.vue | 21 +++++++++++++++++
 src/components/follow_card/follow_card.vue         |  1 +
 .../remove_follower_button.js                      | 27 ++++++++++++++++++++--
 .../remove_follower_button.vue                     | 21 +++++++++++++++++
 src/components/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(-)

(limited to 'src/components')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 7dec0c3d..acd93e06 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 161bab09..ce19291a 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 eff69fb2..bdb6b809 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 e1a7531b..052a519f 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 a3a4c242..0012aebd 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 9de3ed81..703e94a0 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 213f9cf0..ca022c82 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 1df279a2..8e6b2c3d 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 fcb6eecc..ce958907 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',
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'src/components')

diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6d826622..c2746abe 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;
     }
-- 
cgit v1.2.3-70-g09d2