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.vue | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

(limited to 'src/components/account_actions/account_actions.vue')

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 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/account_actions/account_actions.vue')

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/account_actions/account_actions.vue')

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 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/account_actions/account_actions.vue')

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 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/account_actions/account_actions.vue')

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