abstracted mute confirmation dialog into its own component. mutes in status actions work now

src/components/status_action_buttons/action_button.js

@@ -84,8 +84,13 @@ export default {
         }
       ]
     },
+    userIsMuted () {
+      return this.$store.getters.relationship(this.status.user.id).muting
+    },
+    threadIsMuted () {
+      return this.status.thread_muted
+    },
     buttonInnerClass () {
-      if (!this.extra) console.log(this.button.name)
       return [
         this.button.name + '-button',
         {

src/components/status_action_buttons/action_button_container.js

@@ -1,5 +1,6 @@
 import ActionButton from './action_button.vue'
 import Popover from 'src/components/popover/popover.vue'
+import MuteConfirm from 'src/components/confirm_modal/mute_confirm.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -17,7 +18,72 @@ library.add(
 export default {
   components: {
     ActionButton,
-    Popover
+    Popover,
+    MuteConfirm
   },
-  props: ['button']
+  props: ['button', 'status'],
+  mounted () {
+    if (this.button.name === 'mute') {
+      this.$store.dispatch('fetchDomainMutes')
+    }
+  },
+  computed: {
+    buttonClass () {
+      return [
+        this.button.name + '-button',
+        {
+          '-with-extra': this.button.name === 'bookmark',
+          '-extra': this.extra,
+          '-quick': !this.extra
+        }
+      ]
+    },
+    user () {
+      return this.status.user
+    },
+    userIsMuted () {
+      return this.$store.getters.relationship(this.user.id).muting
+    },
+    conversationIsMuted () {
+      return this.status.thread_muted
+    },
+    domain () {
+      return this.user.fqn.split('@')[1]
+    },
+    domainIsMuted () {
+      return new Set(this.$store.state.users.currentUser.domainMutes).has(this.domain)
+    }
+  },
+  methods: {
+    unmuteUser () {
+      return this.$store.dispatch('unmuteUser', this.user.id)
+    },
+    unmuteThread () {
+      return this.$store.dispatch('unmuteConversation', this.user.id)
+    },
+    unmuteDomain () {
+      return this.$store.dispatch('unmuteDomain', this.user.id)
+    },
+    toggleUserMute () {
+      if (this.userIsMuted) {
+        this.unmuteUser()
+      } else {
+        this.$refs.confirmUser.optionallyPrompt()
+      }
+    },
+    toggleConversationMute () {
+      if (this.conversationIsMuted) {
+        this.unmuteConversation()
+      } else {
+        this.$refs.confirmConversation.optionallyPrompt()
+      }
+    },
+    toggleDomainMute () {
+      if (this.domainIsMuted) {
+        this.unmuteDomain()
+      } else {
+        this.$refs.confirmDomain.optionallyPrompt()
+      }
+    }
+  }
 }

src/components/status_action_buttons/action_button_container.vue

@@ -1,58 +1,94 @@
 <template>
-  <Popover
-    trigger="hover"
-    :placement="$attrs.extra ? 'right' : 'top'"
-    v-if="button.dropdown?.()"
-  >
-    <template #trigger>
-      {{ props }}
-      <ActionButton
-        :button="button"
-        v-bind.prop="$attrs"
+  <div>
+    <Popover
+      trigger="hover"
+      :placement="$attrs.extra ? 'right' : 'top'"
+      v-if="button.dropdown?.()"
+    >
+      <template #trigger>
+        {{ props }}
+        <ActionButton
+          :button="button"
+          :status="status"
+          v-bind.prop="$attrs"
+        />
+      </template>
+      <template #content>
+        <div
+          v-if="button.name === 'mute'"
+          class="dropdown-menu"
+          :id="`popup-menu-${randomSeed}`"
+          role="menu"
+        >
+          <div class="menu-item dropdown-item extra-action -icon">
+            <button
+              class="main-button"
+              @click="toggleUserMute"
+            >
+              <FAIcon icon="user" fixed-width />
+              <template v-if="userIsMuted">
+                {{ $t('status.unmute_user') }}
+              </template>
+              <template v-else>
+                {{ $t('status.mute_user') }}
+              </template>
+            </button>
+          </div>
+          <div class="menu-item dropdown-item extra-action -icon">
+            <button
+              class="main-button"
+              @click="toggleUserMute"
+            >
+              <FAIcon icon="folder-tree" fixed-width />
+              <template v-if="threadIsMuted">
+                {{ $t('status.unmute_conversation') }}
+              </template>
+              <template v-else>
+                {{ $t('status.mute_conversation') }}
+              </template>
+            </button>
+          </div>
+          <div class="menu-item dropdown-item extra-action -icon">
+            <button
+              class="main-button"
+              @click="toggleDomainMute"
+            >
+              <FAIcon icon="globe" fixed-width />
+              <template v-if="domainIsMuted">
+                {{ $t('status.unmute_domain') }}
+              </template>
+              <template v-else>
+                {{ $t('status.mute_domain') }}
+              </template>
+            </button>
+          </div>
+        </div>
+      </template>
+    </Popover>
+    <ActionButton
+      v-else
+      :button="button"
+      :status="status"
+      v-bind="$attrs"
+    />
+    <teleport to="#modal">
+      <mute-confirm
+        type="conversation"
+        :status="this.status"
+        ref="confirmConversation"
       />
-    </template>
-    <template #content>
-      <div
-        v-if="button.name === 'mute'"
-        class="dropdown-menu"
-        :id="`popup-menu-${randomSeed}`"
-        role="menu"
-      >
-        <div class="menu-item dropdown-item extra-action -icon">
-          <button
-            class="main-button"
-            @click="() => {}"
-          >
-            <FAIcon icon="user" fixed-width />
-            {{ $t('status.mute_user') }}
-          </button>
-        </div>
-        <div class="menu-item dropdown-item extra-action -icon">
-          <button
-            class="main-button"
-            @click="() => {}"
-          >
-            <FAIcon icon="folder-tree" fixed-width />
-            {{ $t('status.mute_conversation') }}
-          </button>
-        </div>
-        <div class="menu-item dropdown-item extra-action -icon">
-          <button
-            class="main-button"
-            @click="() => {}"
-          >
-            <FAIcon icon="globe" fixed-width />
-            {{ $t('status.mute_domain') }}
-          </button>
-        </div>
-      </div>
-    </template>
-  </Popover>
-  <ActionButton
-    v-else
-    :button="button"
-    v-bind="$attrs"
-  />
+      <mute-confirm
+        type="domain"
+        :user="this.user"
+        ref="confirmDomain"
+      />
+      <mute-confirm
+        type="user"
+        :user="this.user"
+        ref="confirmUser"
+      />
+    </teleport>
+  </div>
 </template>
 
 <script src="./action_button_container.js"/>

src/components/status_action_buttons/buttons_definitions.js

@@ -94,11 +94,6 @@ export const BUTTONS = [{
   toggleable: true,
   dropdown: true
   // action ({ status, dispatch, emit }) {
-  //   if (status.thread_muted) {
-  //     return dispatch('unmuteConversation', { id: status.id })
-  //   } else {
-  //     return dispatch('muteConversation', { id: status.id })
-  //   }
   // }
 }, {
   // =========