better indication and text for toggleable actions

src/components/status_action_buttons/action_button.js

@@ -26,7 +26,8 @@ import {
   faHistory
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faStar as faStarRegular
+  faStar as faStarRegular,
+  faBookmark as faBookmarkRegular
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
@@ -46,6 +47,7 @@ library.add(
   faSmileBeam,
 
   faBookmark,
+  faBookmarkRegular,
   faEyeSlash,
   faThumbtack,
   faShareAlt,

src/components/status_action_buttons/action_button.scss

@@ -20,6 +20,18 @@
     padding: 0.5em;
   }
 
+  .separator {
+    width: 0.5em;
+
+    &::before {
+      content: "";
+      display: block;
+      width: 1px;
+      height: 1.5em;
+      background-color: var(--icon);
+    }
+  }
+
   .action-button-inner {
     display: grid;
     grid-gap: 1em;
@@ -28,10 +40,6 @@
     grid-auto-columns: max-content;
     align-items: center;
   }
-
-  .extra-button {
-    border-left: 1px solid var(--icon);
-  }
 }
 
 .action-button {

src/components/status_action_buttons/action_button.vue

@@ -62,6 +62,11 @@
         fixed-width
       />
     </component>
+    <span
+      v-if="!extra && button.name === 'bookmark'"
+      class="separator"
+    >
+    </span>
     <Popover
       trigger="hover"
       :placement="extra ? 'right' : 'top'"

src/components/status_action_buttons/buttons_definitions.js

@@ -23,7 +23,9 @@ export const BUTTONS = [{
   // REPEAT
   // =========
   name: 'retweet',
-  label: 'tool_tip.repeat',
+  label: ({ status }) => status.repeated
+    ? 'tool_tip.unrepeat'
+    : 'tool_tip.repeat',
   icon ({ status }) {
     if (PRIVATE_SCOPES.has(status.visibility)) {
       return 'lock'
@@ -55,7 +57,9 @@ export const BUTTONS = [{
   // FAVORITE
   // =========
   name: 'favorite',
-  label: 'tool_tip.favorite',
+  label: ({ status }) => status.favorited
+    ? 'tool_tip.unfavorite'
+    : 'tool_tip.favorite',
   icon: ({ status }) => status.favorited
     ? ['fas', 'star']
     : ['far', 'star'],
@@ -122,7 +126,9 @@ export const BUTTONS = [{
   // BOOKMARK
   // =========
   name: 'bookmark',
-  icon: 'bookmark',
+  icon: ({ status }) => status.bookmarked
+    ? ['fas', 'bookmark']
+    : ['far', 'bookmark'],
   toggleable: true,
   active: ({ status }) => status.bookmarked,
   label: ({ status }) => status.bookmarked

src/components/status_action_buttons/status_action_buttons.js

@@ -5,7 +5,7 @@ import ActionButtonContainer from './action_button_container.vue'
 import Popover from 'src/components/popover/popover.vue'
 import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
 
-import { BUTTONS } from './buttons_definitions.vue'
+import { BUTTONS } from './buttons_definitions.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {

src/i18n/en.json

@@ -1414,9 +1414,11 @@
     "media_upload": "Upload media",
     "mentions": "Mentions",
     "repeat": "Repeat",
+    "unrepeat": "Unrepeat",
     "reply": "Reply",
     "add_reaction": "Add reaction",
     "favorite": "Favorite",
+    "unfavorite": "Unfavorite",
     "add_reaction": "Add Reaction",
     "user_settings": "User Settings",
     "accept_follow_request": "Accept follow request",