cleanup + fixes

src/components/popover/popover.scss

@@ -48,13 +48,15 @@
     border-top: 1px solid var(--border);
   }
 
-  .dropdown-item:not(button, a) {
+  .dropdown-item {
     padding: 0;
+
+    .popover-wrapper {
+      box-sizing: border-box;
+      display: grid;
+      grid-template-columns: 1fr;
     }
 
-  a.dropdown-item,
-  button.dropdown-item,
-  .dropdown-item:not(button, a) {
     .extra-button {
       border-left: 1px solid var(--icon);
       padding-left: calc(var(--__horizontal-gap) - 1px);
@@ -64,6 +66,7 @@
     }
 
     .main-button {
+      width: 100%;
       padding: var(--__horizontal-gap) var(--__horizontal-gap);
       grid-gap: var(--__horizontal-gap);
       grid-template-columns: 1fr var(--__line-height);
@@ -125,5 +128,11 @@
         padding-left: calc(var(--__line-height) + var(--__horizontal-gap) * 2);
       }
     }
+
+    &.-icon-double {
+      .main-button {
+        grid-template-columns: var(--__line-height) var(--__line-height) 1fr;
+      }
+    }
   }
 }

src/components/popover/popover.vue

@@ -1,5 +1,6 @@
 <template>
   <span
+    class="popover-wrapper"
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >

src/components/quick_view_settings/quick_view_settings.vue

@@ -11,7 +11,7 @@
         role="menu"
       >
         <div role="group">
-          <div class="menu-item dropdown-item -icon">
+          <div class="menu-item dropdown-item -icon-double">
             <button
               class="main-button"
               :aria-checked="conversationDisplay === 'tree'"
@@ -29,7 +29,7 @@
               /> {{ $t('settings.conversation_display_tree_quick') }}
             </button>
           </div>
-          <div class="menu-item dropdown-item -icon">
+          <div class="menu-item dropdown-item -icon-double">
             <button
               class="main-button"
               :aria-checked="conversationDisplay === 'linear'"

src/components/status_action_buttons/action_button.scss

@@ -0,0 +1,56 @@
+@import "../../mixins";
+/* stylelint-disable declaration-no-important */
+
+.action-button {
+  &.-quick {
+    display: grid;
+    grid-template-columns: max-content auto;
+    grid-gap: 1em;
+    align-items: center;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  &:hover,
+  &.-active {
+    &.reply-button:not(.disabled) {
+      .svg-inline--fa {
+        color: var(--cBlue);
+      }
+    }
+
+    &.retweet-button:not(.disabled) {
+      .svg-inline--fa {
+        color: var(--cGreen);
+      }
+    }
+
+    &.favorite-button:not(.disabled) {
+      .svg-inline--fa {
+        color: var(--cOrange);
+      }
+    }
+  }
+
+  @include unfocused-style {
+    .focus-marker {
+      visibility: hidden;
+    }
+
+    .active-marker {
+      visibility: visible;
+    }
+  }
+
+  @include focused-style {
+    .focus-marker {
+      visibility: visible;
+    }
+
+    .active-marker {
+      visibility: hidden;
+    }
+  }
+}

src/components/status_action_buttons/action_button.vue

@@ -2,10 +2,11 @@
   <div>
     <component
       :is="getComponent(button)"
-      class="main-button"
+      class="main-button action-button"
+      :class="buttonClass"
       role="menuitem"
       :tabindex="0"
-      :disabled="getClass(button).disabled"
+      :disabled="buttonClass.disabled"
       :href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
       @click.stop="getComponent(button) === 'button' && doAction(button)"
       @click="close"
@@ -15,25 +16,25 @@
           class="fa-scale-110"
           :icon="button.icon(funcArg)"
           :spin="!extra && button.animated?.() && animationState[button.name]"
-          :fixed-width="extra"
+          fixed-width
         />
-        <template v-if="!getClass(button).disabled && button.toggleable?.(funcArg) && button.active">
+        <template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
           <FAIcon
             v-if="button.active(funcArg)"
             class="active-marker"
-            transform="shrink-6 up-9 right-12"
+            transform="shrink-6 up-9 right-15"
             :icon="button.activeIndicator?.(funcArg) || 'check'"
           />
           <FAIcon
             v-if="!button.active(funcArg)"
             class="focus-marker"
-            transform="shrink-6 up-9 right-12"
+            transform="shrink-6 up-9 right-15"
             :icon="button.openIndicator?.(funcArg) || 'plus'"
           />
           <FAIcon
             v-else
             class="focus-marker"
-            transform="shrink-6 up-9 right-12"
+            transform="shrink-6 up-9 right-15"
             :icon="button.closeIndicator?.(funcArg) || 'minus'"
           />
         </template>
@@ -108,6 +109,19 @@ export default {
     'getComponent',
     'doAction',
     'close'
-  ]
+  ],
+  computed: {
+    buttonClass () {
+      return {
+        [this.button.name + '-button']: true,
+        '-extra': this.extra,
+        '-quick': !this.extra,
+        '-active': this.button.active?.(this.funcArg),
+        disabled: this.button.interactive ? !this.button.interactive(this.funcArg) : false
+      }
+    }
+  }
 }
 </script>
+
+<style lang="scss" src="./action_button.scss"/>

src/components/status_action_buttons/status_action_buttons.js

@@ -159,8 +159,8 @@ const BUTTONS = [{
   name: 'pin',
   icon: 'thumbtack',
   label: ({ status }) => status.pinned
-    ? 'status.pin'
+    ? 'status.unpin'
-    : 'status.unpin',
+    : 'status.pin',
   if ({ status, loggedIn, currentUser }) {
     return loggedIn &&
       status.user.id === currentUser.id &&
@@ -179,9 +179,11 @@ const BUTTONS = [{
   // =========
   name: 'bookmark',
   icon: 'bookmark',
+  toggleable: true,
+  active: ({ status }) => status.bookmarked,
   label: ({ status }) => status.bookmarked
-    ? 'status.bookmark'
+    ? 'status.unbookmark'
-    : 'status.unbookmark',
+    : 'status.bookmark',
   if: ({ loggedIn }) => loggedIn,
   action ({ status, dispatch, emit }) {
     if (status.bookmarked) {

src/components/status_action_buttons/status_action_buttons.scss

@@ -13,17 +13,6 @@
       display: grid;
       grid-template-columns: 1fr auto;
 
-      .action-button {
-        display: grid;
-        grid-template-columns: max-content auto;
-        grid-gap: 1em;
-        align-items: center;
-
-        &.disabled {
-          cursor: not-allowed;
-        }
-      }
-
       &.-pin {
         margin: calc(-2px - 0.25em);
         padding: 0.25em;
@@ -106,56 +95,6 @@
       padding: var(--__horizontal-gap) var(--__horizontal-gap);
     }
   }
-
-  > a,
-  > button {
-    @include unfocused-style {
-      .focus-marker {
-        visibility: hidden;
-      }
-
-      .active-marker {
-        visibility: visible;
-      }
-    }
-
-    @include focused-style {
-      .focus-marker {
-        visibility: visible;
-      }
-
-      .active-marker {
-        visibility: hidden;
-      }
-    }
-  }
-
-  .reply-button:not(.disabled) {
-    &:hover,
-    &.-active {
-      .svg-inline--fa {
-        color: var(--cBlue);
-      }
-    }
-  }
-
-  .retweet-button:not(.disabled) {
-    &:hover,
-    &.-active {
-      .svg-inline--fa {
-        color: var(--cGreen);
-      }
-    }
-  }
-
-  .favorite-button:not(.disabled) {
-    &:hover,
-    &.-active {
-      .svg-inline--fa {
-        color: var(--cOrange);
-      }
-    }
-  }
 }
 
 /* stylelint-enable no-descending-specificity */

src/components/status_action_buttons/status_action_buttons.vue

@@ -130,7 +130,24 @@
                   />
                 </template>
                 <template #content>
-                  <StatusBookmarkFolderMenu v-if="button.name === 'mute'" :status="funcArg.status" />
+                  <template v-if="button.name === 'mute'">
+                    <div
+                      v-for="folder in folders"
+                      :key="folder.id"
+                      class="menu-item dropdown-item -icon"
+                    >
+                      <button
+                        class="main-button"
+                        @click="toggleFolder(folder.id)"
+                      >
+                        <span
+                          class="input menu-checkbox -radio"
+                          :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
+                        />
+                        {{ folder.name }}
+                      </button>
+                    </div>
+                  </template>
                 </template>
               </Popover>
               <Popover