proper toggle for pinning

src/components/status_action_buttons/status_action_buttons.js

@@ -10,6 +10,7 @@ import {
   faMinus,
   faCheck,
   faTimes,
+  faWrench,
 
   faReply,
   faRetweet,
@@ -33,6 +34,7 @@ library.add(
   faMinus,
   faCheck,
   faTimes,
+  faWrench,
 
   faReply,
   faRetweet,
@@ -279,7 +281,7 @@ const StatusActionButtons = {
   emits: ['toggleReplying'],
   data () {
     return {
-      showPin: true,
+      showPin: false,
       showingConfirmDialog: false,
       currentConfirmTitle: '',
       currentConfirmOkText: '',

src/components/status_action_buttons/status_action_buttons.scss

@@ -99,14 +99,6 @@
     .pin-action-button {
       margin: 0;
       padding: var(--__horizontal-gap) var(--__horizontal-gap);
-
-      &::before {
-        content: "";
-        height: 1em;
-        width: 1px;
-        border-left: 1px solid var(--icon);
-        margin-right: 0.5em;
-      }
     }
   }
 }

src/components/status_action_buttons/status_action_buttons.vue

@@ -89,6 +89,20 @@
             class="dropdown-menu extra-action-buttons"
             role="menu"
           >
+            <div class="menu-item dropdown-item extra-action dropdown-item-icon">
+              <button
+                class="main-button"
+                role="menuitem"
+                :tabindex="0"
+                @click.stop="showPin = !showPin"
+              >
+                <FAIcon
+                  class="fa-scale-110"
+                  fixed-width
+                  icon="wrench"
+                /><span>{{ $t('nav.edit_pinned') }}</span>
+              </button>
+            </div>
             <div
               v-for="button in extraButtons"
               :key="button.name"
@@ -121,7 +135,7 @@
                 <FAIcon
                   v-if="showPin && currentUser"
                   fixed-width
-                  class="fa-scale-110 veryfaint"
+                  class="fa-scale-110"
                   transform="rotate-45"
                   icon="thumbtack"
                 />