From 40ca0b394ea066dea95c672eb0a42a35c9e65317 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Sun, 6 Sep 2020 15:28:09 +0300
Subject: add basic deletes support that works with masto WS

---
 src/components/status/status.vue | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

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

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 282ad37d..d7dfc0ab 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -95,6 +95,7 @@
       </div>
 
       <div
+        v-if="!deleted"
         :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
         :style="[ userStyle ]"
         class="status-container"
@@ -356,6 +357,31 @@
           </div>
         </div>
       </div>
+      <div
+        v-else
+        class="deleted"
+      >
+        <div class="left-side">
+          <UserAvatar :compact="compact" />
+        </div>
+        <div class="right-side">
+          <div class="deleted-text">
+            {{ $t('status.status_deleted') }}
+          </div>
+          <div
+            v-if="replying"
+            class="status-actions"
+          >
+            <i
+              v-if="loggedIn"
+              class="button-icon button-reply icon-reply"
+              :title="$t('tool_tip.reply')"
+              :class="{'-active': replying}"
+              @click.prevent="toggleReplying"
+            />
+          </div>
+        </div>
+      </div>
       <div
         v-if="replying"
         class="status-container reply-form"
-- 
cgit v1.2.3-70-g09d2


From f9ac23b9a94dd35ba623814a59f4df83895acb42 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 7 Sep 2020 10:35:49 +0300
Subject: separate reply button to its own component, add changelog entry

---
 CHANGELOG.md                                 |  3 +++
 src/components/reply_button/reply_button.js  | 12 +++++++++
 src/components/reply_button/reply_button.vue | 21 ++++++++++++++++
 src/components/status/status.js              |  2 ++
 src/components/status/status.vue             | 37 ++++++++--------------------
 5 files changed, 48 insertions(+), 27 deletions(-)
 create mode 100644 src/components/reply_button/reply_button.js
 create mode 100644 src/components/reply_button/reply_button.vue

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18dafa8e..f07856df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## [Unreleased]
 ## [Unreleased patch]
 
+### Added
+- Proper handling of deletes when using websocket streaming
+
 ### Changed
 - Polls will be hidden with status content if "Collapse posts with subjects" is enabled and the post is collapsed.
 
diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js
new file mode 100644
index 00000000..22957650
--- /dev/null
+++ b/src/components/reply_button/reply_button.js
@@ -0,0 +1,12 @@
+
+const ReplyButton = {
+  name: 'ReplyButton',
+  props: ['status', 'replying'],
+  computed: {
+    loggedIn () {
+      return !!this.$store.state.users.currentUser
+    }
+  }
+}
+
+export default ReplyButton
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
new file mode 100644
index 00000000..b2904b5c
--- /dev/null
+++ b/src/components/reply_button/reply_button.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <i
+      v-if="loggedIn"
+      class="button-icon button-reply icon-reply"
+      :title="$t('tool_tip.reply')"
+      :class="{'-active': replying}"
+      @click.prevent="$emit('toggle')"
+    />
+    <i
+      v-else
+      class="button-icon button-reply -disabled icon-reply"
+      :title="$t('tool_tip.reply')"
+    />
+    <span v-if="status.replies_count > 0">
+      {{ status.replies_count }}
+    </span>
+  </div>
+</template>
+
+<script src="./reply_button.js"></script>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 5a6110c1..cb39fd6e 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,3 +1,4 @@
+import ReplyButton from '../reply_button/reply_button.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -20,6 +21,7 @@ import { mapGetters, mapState } from 'vuex'
 const Status = {
   name: 'Status',
   components: {
+    ReplyButton,
     FavoriteButton,
     ReactButton,
     RetweetButton,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d7dfc0ab..cb81b14e 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -321,21 +321,11 @@
             v-if="!noHeading && !isPreview"
             class="status-actions"
           >
-            <div>
-              <i
-                v-if="loggedIn"
-                class="button-icon button-reply icon-reply"
-                :title="$t('tool_tip.reply')"
-                :class="{'-active': replying}"
-                @click.prevent="toggleReplying"
-              />
-              <i
-                v-else
-                class="button-icon button-reply -disabled icon-reply"
-                :title="$t('tool_tip.reply')"
-              />
-              <span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
-            </div>
+            <reply-button
+              :replying="replying"
+              :status="status"
+              @toggle="toggleReplying"
+            />
             <retweet-button
               :visibility="status.visibility"
               :logged-in="loggedIn"
@@ -368,18 +358,11 @@
           <div class="deleted-text">
             {{ $t('status.status_deleted') }}
           </div>
-          <div
-            v-if="replying"
-            class="status-actions"
-          >
-            <i
-              v-if="loggedIn"
-              class="button-icon button-reply icon-reply"
-              :title="$t('tool_tip.reply')"
-              :class="{'-active': replying}"
-              @click.prevent="toggleReplying"
-            />
-          </div>
+          <reply-button
+            :replying="replying"
+            :status="status"
+            @toggle="toggleReplying"
+          />
         </div>
       </div>
       <div
-- 
cgit v1.2.3-70-g09d2


From fa9176651952468ee996abe0e67d62d9a72d5a69 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 8 Sep 2020 09:32:43 +0300
Subject: rename to gravestone

---
 src/components/status/status.scss | 2 +-
 src/components/status/status.vue  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

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

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 2717c0ba..bd23157f 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -25,7 +25,7 @@ $status-margin: 0.75em;
     --icon: var(--selectedPostIcon, $fallback--icon);
   }
 
-  .deleted {
+  .gravestone {
     padding: $status-margin;
     color: $fallback--faint;
     color: var(--faint, $fallback--faint);
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cb81b14e..75142250 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -349,7 +349,7 @@
       </div>
       <div
         v-else
-        class="deleted"
+        class="gravestone"
       >
         <div class="left-side">
           <UserAvatar :compact="compact" />
@@ -359,6 +359,7 @@
             {{ $t('status.status_deleted') }}
           </div>
           <reply-button
+            v-if="replying"
             :replying="replying"
             :status="status"
             @toggle="toggleReplying"
-- 
cgit v1.2.3-70-g09d2