From 04179340f6ede86bed2acc9adfd6cd4d803fc40c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 14 Jan 2024 19:36:14 +0800
Subject: [PATCH] Further enhance actions bar

- Focus color when context menu is open
- Focus color for more button when context menu is open
- Reuse menu instead of creating another menu
- Show like toast when liked/unliked
---
 src/components/status.css | 20 +++++++++++++
 src/components/status.jsx | 62 ++++++++++++++++++++++-----------------
 2 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index 506eea10..b856e40e 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1822,6 +1822,20 @@ a.card:is(:hover, :focus):visited {
     pointer-events: auto;
     transform: scale(1);
   }
+  .status:has(&):hover {
+    transition: background-color 0.1s ease-out 0.3s;
+    background-color: var(--bg-faded-blur-color);
+  }
+
+  &.open {
+    button.more-button {
+      background-color: var(--outline-color);
+    }
+
+    button:not(.more-button) {
+      opacity: 0.3;
+    }
+  }
 }
 
 /* BADGE */
@@ -1922,6 +1936,12 @@ a.card:is(:hover, :focus):visited {
   font-size: 80%;
 }
 
+/* MENU OPEN */
+
+.status-menu-open {
+  background-color: var(--link-bg-hover-color) !important;
+}
+
 /* FILTERED */
 
 #filtered-status-peek {
diff --git a/src/components/status.jsx b/src/components/status.jsx
index d58db180..9e963112 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1266,7 +1266,9 @@ function Status({
           m: 'medium',
           l: 'large',
         }[size]
-      } ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''}`}
+      } ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''} ${
+        isContextMenuOpen ? 'status-menu-open' : ''
+      }`}
       onMouseEnter={debugHover}
       onContextMenu={(e) => {
         // FIXME: this code isn't getting called on Chrome at all?
@@ -1319,7 +1321,10 @@ function Status({
         </ControlledMenu>
       )}
       {showActionsBar && size !== 'l' && !previewMode && !readOnly && (
-        <div class="status-actions" ref={actionsRef}>
+        <div
+          class={`status-actions ${isContextMenuOpen ? 'open' : ''}`}
+          ref={actionsRef}
+        >
           <StatusButton
             size="s"
             title="Reply"
@@ -1338,34 +1343,37 @@ function Status({
             icon="heart"
             iconSize="m"
             count={favouritesCount}
-            onClick={favouriteStatus}
-          />
-          <Menu2
-            portal={{
-              target: document.querySelector('.status-deck') || document.body,
+            onClick={() => {
+              try {
+                favouriteStatus();
+                showToast(
+                  favourited
+                    ? `Unliked @${username || acct}'s post`
+                    : `Liked @${username || acct}'s post`,
+                );
+              } catch (e) {}
             }}
-            align="end"
-            gap={4}
-            overflow="auto"
-            viewScroll="close"
-            menuButton={({ open }) => {
-              if (actionsRef.current) {
-                actionsRef.current.classList.toggle('open', open);
-              }
-              return (
-                <button
-                  type="button"
-                  title="More"
-                  class="plain more-button"
-                  onClick={(e) => e.preventDefault()}
-                >
-                  <Icon icon="more2" size="m" alt="More" />
-                </button>
-              );
+          />
+          <button
+            type="button"
+            title="More"
+            class="plain more-button"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              setContextMenuProps({
+                anchorRef: {
+                  current: e.currentTarget,
+                },
+                align: 'end',
+                direction: 'bottom',
+                gap: 4,
+              });
+              setIsContextMenuOpen(true);
             }}
           >
-            {StatusMenuItems}
-          </Menu2>
+            <Icon icon="more2" size="m" alt="More" />
+          </button>
         </div>
       )}
       {size !== 'l' && (