From b3ce454203c5ce138fc11421a2bf7c6325e4bc43 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2025 22:20:02 +0200
Subject: [PATCH] more fixes for popover

---
 src/components/popover/popover.js               | 10 +++++-----
 src/components/popover/popover.scss             | 14 +++++++++++---
 .../status_action_buttons/action_button.vue     |  2 +-
 .../status_action_buttons.js                    |  2 +-
 .../status_action_buttons.vue                   | 17 +++++++++++++++++
 .../user_list_menu/user_list_menu.vue           |  2 +-
 6 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index c076a61c5..6b49cf682 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -197,7 +197,7 @@ const Popover = {
         // Default to whatever user wished with placement prop
         let usingTop = this.placement !== 'bottom'
 
-        // Handle special cases, first force to displaying on top if there's not space on bottom,
+        // Handle special cases, first force to displaying on top if there's no space on bottom,
         // regardless of what placement value was. Then check if there's no space on top, and
         // force to bottom, again regardless of what placement value was.
         const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
@@ -216,13 +216,13 @@ const Popover = {
         // Default to whatever user wished with placement prop
         let usingLeft = this.placement !== 'right'
 
-        // Handle special cases, first force to displaying on left if there's not space on right,
+        // Handle special cases, first force to displaying on left if there's no space on right,
         // regardless of what placement value was. Then check if there's no space on right, and
-        // force to bottom, again regardless of what placement value was.
+        // force to left, again regardless of what placement value was.
         const leftBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? leftPadding : 0)
         const rightBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? rightPadding : 0)
-        if (leftBoundary - content.offsetWidth > xBounds.max) usingLeft = true
-        if (rightBoundary + content.offsetWidth < xBounds.min) usingLeft = false
+        if (rightBoundary + content.offsetWidth > xBounds.max) usingLeft = true
+        if (leftBoundary - content.offsetWidth < xBounds.min) usingLeft = false
 
         const xOffset = (this.offset && this.offset.x) || 0
         translateX = usingLeft
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
index 6fe06299f..b7f426e08 100644
--- a/src/components/popover/popover.scss
+++ b/src/components/popover/popover.scss
@@ -63,13 +63,21 @@
       cursor: pointer;
     }
 
-    .main-button {
+    .main-button,
+    .extra-button {
+      display: grid;
       box-sizing: border-box;
       padding: var(--__horizontal-gap) var(--__horizontal-gap);
-      grid-gap: var(--__horizontal-gap);
-      display: grid;
       border: none;
       align-items: center;
+    }
+
+    .extra-button {
+      border-left: 1px solid var(--icon);
+    }
+
+    .main-button {
+      grid-gap: var(--__horizontal-gap);
       grid-template-columns: 1fr var(--__line-height);
       grid-auto-flow: column;
       grid-auto-columns: auto;
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
index 9510d0bad..a634308d9 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -39,7 +39,7 @@
         </template>
       </FALayers><span>{{ $t(button.label(funcArg)) }}</span>
       <FAIcon
-        v-if="button.name === 'bookmark'"
+        v-if="button.name === 'mute'"
         class="chevron-icon"
         size="lg"
         icon="chevron-right"
diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
index 6eea5e0bb..60775b309 100644
--- a/src/components/status_action_buttons/status_action_buttons.js
+++ b/src/components/status_action_buttons/status_action_buttons.js
@@ -138,7 +138,7 @@ const BUTTONS = [{
   // =========
   // MUTE CONVERSATION, my beloved
   // =========
-  name: 'mute-conversation',
+  name: 'mute',
   icon: 'eye-slash',
   label: ({ status }) => status.thread_muted
     ? 'status.unmute_conversation'
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index d8573cdf7..79b7a4d6a 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -129,6 +129,23 @@
                     :do-action="doAction"
                   />
                 </template>
+                <template #content>
+                  <StatusBookmarkFolderMenu v-if="button.name === 'mute'" :status="funcArg.status" />
+                </template>
+              </Popover>
+              <Popover
+                trigger="hover"
+                placement="right"
+                :trigger-attrs="{ class: 'extra-button' }"
+                v-if="button.name === 'bookmark'"
+              >
+                <template #trigger>
+                  <FAIcon
+                    class="chevron-icon"
+                    size="lg"
+                    icon="chevron-right"
+                  />
+                </template>
                 <template #content>
                   <StatusBookmarkFolderMenu v-if="button.name === 'bookmark'" :status="funcArg.status" />
                 </template>
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index 446441b38..a1ba96d89 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -2,7 +2,7 @@
   <div class="UserListMenu">
     <Popover
       trigger="hover"
-      placement="left"
+      placement="right"
       :trigger-attrs="triggerAttrs"
       remove-padding
     >