From a89a21c3ef3bd3cfb68d5810f416cacb02dff4d6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2025 05:18:23 +0200
Subject: [PATCH] color+indicator for toggleable stuff in extra-buttons

---
 .../status_action_buttons.scss                | 30 +++++++++++++++++
 .../status_action_buttons.vue                 | 32 ++++++++++++++++---
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index 87d1e3215..5a230af8e 100644
--- a/src/components/status_action_buttons/status_action_buttons.scss
+++ b/src/components/status_action_buttons/status_action_buttons.scss
@@ -88,6 +88,7 @@
   }
 }
 // popover
+/* stylelint-disable no-descending-specificity */
 .extra-action-buttons {
   .extra-action {
     display: grid;
@@ -101,4 +102,33 @@
       padding: var(--__horizontal-gap) var(--__horizontal-gap);
     }
   }
+
+  .reply-button {
+    &:hover,
+    &.-active {
+      .svg-inline--fa {
+        color: var(--cBlue);
+      }
+    }
+  }
+
+  .retweet-button {
+    &:hover,
+    &.-active {
+      .svg-inline--fa {
+        color: var(--cGreen);
+      }
+    }
+  }
+
+  .favorite-button {
+    &:hover,
+    &.-active {
+      .svg-inline--fa {
+        color: var(--cOrange);
+      }
+    }
+  }
 }
+
+/* stylelint-enable no-descending-specificity */
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index 5c057d9ed..41356942e 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -118,11 +118,33 @@
                 @click="close"
                 :href="component(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
               >
-                <FAIcon
-                  class="fa-scale-110"
-                  fixed-width
-                  :icon="button.icon(funcArg)"
-                /><span>{{ $t(button.label(funcArg)) }}</span>
+                <FALayers>
+                  <FAIcon
+                    class="fa-scale-110"
+                    :icon="button.icon(funcArg)"
+                    fixed-width
+                  />
+                  <template v-if="button.toggleable?.(funcArg) && button.active">
+                    <FAIcon
+                      v-if="button.active(funcArg)"
+                      class="active-marker"
+                      transform="shrink-6 up-9 right-12"
+                      :icon="button.activeIndicator?.(funcArg) || 'check'"
+                    />
+                    <FAIcon
+                      v-if="!button.active(funcArg)"
+                      class="focus-marker"
+                      transform="shrink-6 up-9 right-12"
+                      :icon="button.openIndicator?.(funcArg) || 'plus'"
+                    />
+                    <FAIcon
+                      v-else
+                      class="focus-marker"
+                      transform="shrink-6 up-9 right-12"
+                      :icon="button.closeIndicator?.(funcArg) || 'minus'"
+                    />
+                  </template>
+                </FALayers><span>{{ $t(button.label(funcArg)) }}</span>
               </component>
               <button
                 v-if="showPin && currentUser"