fix: align status actions (#143)

components/status/StatusActionButton.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 defineProps<{
   text?: string | number
+  content: string
   color: string
   icon: string
   activeIcon?: string
@@ -18,16 +19,18 @@ defineOptions({
 
 <template>
   <component
-    :is="as || 'button'"
+    :is="as || 'button'" w-fit
     flex gap-1 items-center rounded group
-    :hover="`op100 ${hover}`" focus:outline-none :focus-visible="`op100 ${hover}`"
-    :class="active ? [color, 'op100'] : 'op50'"
+    :hover="hover" focus:outline-none :focus-visible="hover"
+    :class="active ? [color] : 'text-secondary'"
     v-bind="$attrs"
   >
-    <div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current">
-      <div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
-    </div>
+    <CommonTooltip placement="bottom" :content="content">
+      <div rounded-full p2 :group-hover="groupHover" :group-focus-visible="groupHover" group-focus-visible:ring="2 current">
+        <div :class="[active && activeIcon ? activeIcon : icon, { 'pointer-events-none': disabled }]" />
+      </div>
+    </CommonTooltip>
 
-    <span v-if="text">{{ text }}</span>
+    <span v-if="text" :class="active ? [color] : 'text-secondary-light'" text-sm>{{ text }}</span>
   </component>
 </template>

components/status/StatusActions.vue

@@ -122,18 +122,20 @@ function editStatus() {
 
 <template>
   <div flex justify-between>
-    <CommonTooltip placement="bottom" content="Reply">
+    <div flex-1>
       <StatusActionButton
+        content="Reply"
         as="router-link"
         :to="getStatusPath(status)"
         :text="status.repliesCount"
         color="text-blue" hover="text-blue" group-hover="bg-blue/10"
         icon="i-ri:chat-3-line"
       />
-    </CommonTooltip>
+    </div>
 
-    <CommonTooltip placement="bottom" content="Boost">
+    <div flex-1>
       <StatusActionButton
+        content="Boost"
         :text="status.reblogsCount"
         color="text-green" hover="text-green" group-hover="bg-green/10"
         icon="i-ri:repeat-line"
@@ -142,23 +144,24 @@ function editStatus() {
         :disabled="isLoading.reblogged"
         @click="toggleReblog()"
       />
-    </CommonTooltip>
+    </div>
 
-    <CommonTooltip placement="bottom" content="Favourite">
+    <div flex-1>
       <StatusActionButton
+        content="Favourite"
         :text="status.favouritesCount"
         color="text-rose" hover="text-rose" group-hover="bg-rose/10"
         icon="i-ri:heart-3-line"
         active-icon="i-ri:heart-3-fill"
         :active="status.favourited"
         :disabled="isLoading.favourited"
-
         @click="toggleFavourite()"
       />
-    </CommonTooltip>
+    </div>
 
-    <CommonTooltip placement="bottom" content="Bookmark">
+    <div flex-none>
       <StatusActionButton
+        content="Bookmark"
         color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
         icon="i-ri:bookmark-line"
         active-icon="i-ri:bookmark-fill"
@@ -166,15 +169,14 @@ function editStatus() {
         :disabled="isLoading.bookmarked"
         @click="toggleBookmark()"
       />
-    </CommonTooltip>
+    </div>
 
-    <CommonDropdown placement="bottom">
-      <CommonTooltip placement="bottom" content="More">
-        <StatusActionButton
-          color="text-purple" hover="text-purple" group-hover="bg-purple/10"
-          icon="i-ri:more-line"
-        />
-      </CommonTooltip>
+    <CommonDropdown flex-none ml3 placement="bottom">
+      <StatusActionButton
+        content="More"
+        color="text-purple" hover="text-purple" group-hover="bg-purple/10"
+        icon="i-ri:more-line"
+      />
 
       <template #popper>
         <div flex="~ col">