From e351665bb31745e2639abef3e47bf4f9df616d6b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 2 Nov 2020 23:43:32 +0200
Subject: [PATCH 1/2] Instead of blocking all interaction, only block
 interaction in places that matter

---
 src/components/extra_buttons/extra_buttons.vue     |  4 ++++
 src/components/favorite_button/favorite_button.vue |  4 ++++
 src/components/react_button/react_button.vue       |  4 ++++
 src/components/reply_button/reply_button.vue       |  4 ++++
 src/components/retweet_button/retweet_button.vue   |  4 ++++
 src/components/status/status.scss                  | 14 ++++++++++++++
 src/components/status/status.vue                   |  1 +
 src/components/status_content/status_content.vue   |  4 ++++
 src/components/timeline/timeline.js                |  2 +-
 src/components/timeline/timeline.vue               |  2 +-
 src/components/user_card/user_card.vue             |  4 ++++
 11 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a33f6e87ab..984b04836b 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -120,5 +120,9 @@
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }
+
+  ._misclick-prevention & {
+    pointer-events: none !important;
+  }
 }
 </style>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index dfe12f8673..55872133aa 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -35,6 +35,10 @@
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
     }
+
+    ._misclick-prevention & {
+      pointer-events: none !important;
+    }
   }
 
   &.-favorited {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 95d95b11d6..bb4472d71b 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -107,6 +107,10 @@
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }
+
+  ._misclick-prevention & {
+    pointer-events: none !important;
+  }
 }
 
 </style>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index a0ac89416b..4ca37d5ed8 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -34,6 +34,10 @@
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
     }
+
+    ._misclick-prevention & {
+      pointer-events: none !important;
+    }
   }
 }
 </style>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index b234f3d914..b79fcd7570 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -45,6 +45,10 @@
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
+
+    ._misclick-prevention & {
+      pointer-events: none !important;
+    }
   }
 
   &.-repeated {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0a395086c1..769f7ef4b3 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -59,6 +59,12 @@ $status-margin: 0.75em;
     justify-content: flex-end;
   }
 
+  .user-avatar {
+    ._misclick-prevention & {
+      pointer-events: none !important;
+    }
+  }
+
   .left-side {
     margin-right: $status-margin;
   }
@@ -108,6 +114,10 @@ $status-margin: 0.75em;
     a {
       display: inline-block;
       word-break: break-all;
+
+      ._misclick-prevention & {
+        pointer-events: none !important;
+      }
     }
   }
 
@@ -250,6 +260,10 @@ $status-margin: 0.75em;
       vertical-align: middle;
       object-fit: contain;
     }
+
+    ._misclick-prevention & a {
+      pointer-events: none !important;
+    }
   }
 
   .status-fadein {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 21412faa6d..eb54befcb5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -119,6 +119,7 @@
         >
           <router-link
             :to="userProfileLink"
+            class="user-avatar"
             @click.stop.prevent.capture.native="toggleUserExpanded"
           >
             <UserAvatar
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 321cd4772c..e387549826 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -240,6 +240,10 @@ $status-margin: 0.75em;
     word-wrap: break-word;
     word-break: break-word;
 
+    ._misclick-prevention & :not(.attachments) a {
+      pointer-events: none !important;
+    }
+
     blockquote {
       margin: 0.2em 0 0.2em 2em;
       font-style: italic;
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 368ee81be5..cba46daf65 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -72,7 +72,7 @@ const Timeline = {
     },
     classes () {
       let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
-      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked'])
+      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
         header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 373b946f2e..04859852b5 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -113,7 +113,7 @@
   }
 
   &.-blocked {
-    pointer-events: none;
+    cursor: progress;
   }
 }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index f916af9db5..d1cfe65472 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -282,6 +282,10 @@
 .user-card {
   position: relative;
 
+  ._misclick-prevention & {
+    pointer-events: none !important;
+  }
+
   &:hover .Avatar {
     --_still-image-img-visibility: visible;
     --_still-image-canvas-visibility: hidden;

From d126eddfcac6e54f337e5aa3b9744a46f01e7ba9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 3 Nov 2020 18:39:46 +0200
Subject: [PATCH 2/2] change approach to disable all, enable some

---
 src/components/extra_buttons/extra_buttons.vue  |  4 ----
 .../favorite_button/favorite_button.vue         |  4 ----
 src/components/react_button/react_button.vue    |  4 ----
 src/components/reply_button/reply_button.vue    |  4 ----
 .../retweet_button/retweet_button.vue           |  4 ----
 src/components/status/status.scss               | 17 ++++++-----------
 src/components/status/status.vue                |  1 -
 .../status_content/status_content.vue           |  4 ----
 src/components/user_card/user_card.vue          |  4 ----
 9 files changed, 6 insertions(+), 40 deletions(-)

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 984b04836b..a33f6e87ab 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -120,9 +120,5 @@
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }
-
-  ._misclick-prevention & {
-    pointer-events: none !important;
-  }
 }
 </style>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 55872133aa..dfe12f8673 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -35,10 +35,6 @@
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
     }
-
-    ._misclick-prevention & {
-      pointer-events: none !important;
-    }
   }
 
   &.-favorited {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index bb4472d71b..95d95b11d6 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -107,10 +107,6 @@
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }
-
-  ._misclick-prevention & {
-    pointer-events: none !important;
-  }
 }
 
 </style>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index 4ca37d5ed8..a0ac89416b 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -34,10 +34,6 @@
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
     }
-
-    ._misclick-prevention & {
-      pointer-events: none !important;
-    }
   }
 }
 </style>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index b79fcd7570..b234f3d914 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -45,10 +45,6 @@
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
-
-    ._misclick-prevention & {
-      pointer-events: none !important;
-    }
   }
 
   &.-repeated {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 769f7ef4b3..0a94de32cb 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -59,9 +59,12 @@ $status-margin: 0.75em;
     justify-content: flex-end;
   }
 
-  .user-avatar {
-    ._misclick-prevention & {
-      pointer-events: none !important;
+  ._misclick-prevention & {
+    pointer-events: none;
+
+    .attachments {
+      pointer-events: initial;
+      cursor: initial;
     }
   }
 
@@ -114,10 +117,6 @@ $status-margin: 0.75em;
     a {
       display: inline-block;
       word-break: break-all;
-
-      ._misclick-prevention & {
-        pointer-events: none !important;
-      }
     }
   }
 
@@ -260,10 +259,6 @@ $status-margin: 0.75em;
       vertical-align: middle;
       object-fit: contain;
     }
-
-    ._misclick-prevention & a {
-      pointer-events: none !important;
-    }
   }
 
   .status-fadein {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index eb54befcb5..21412faa6d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -119,7 +119,6 @@
         >
           <router-link
             :to="userProfileLink"
-            class="user-avatar"
             @click.stop.prevent.capture.native="toggleUserExpanded"
           >
             <UserAvatar
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index e387549826..321cd4772c 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -240,10 +240,6 @@ $status-margin: 0.75em;
     word-wrap: break-word;
     word-break: break-word;
 
-    ._misclick-prevention & :not(.attachments) a {
-      pointer-events: none !important;
-    }
-
     blockquote {
       margin: 0.2em 0 0.2em 2em;
       font-style: italic;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index d1cfe65472..f916af9db5 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -282,10 +282,6 @@
 .user-card {
   position: relative;
 
-  ._misclick-prevention & {
-    pointer-events: none !important;
-  }
-
   &:hover .Avatar {
     --_still-image-img-visibility: visible;
     --_still-image-canvas-visibility: hidden;