From 9c8aff6d320b5eeb3f167331ee997b658b75f0cf Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 24 Mar 2024 17:24:47 +0800
Subject: [PATCH] Show post preview inside Boosted/Liked by modal

And show the menu in more places
---
 src/components/generic-accounts.css | 20 ++++++++++++++
 src/components/generic-accounts.jsx |  9 +++++++
 src/components/modals.jsx           |  1 +
 src/components/status.jsx           | 42 ++++++++++++++++-------------
 4 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/src/components/generic-accounts.css b/src/components/generic-accounts.css
index ad33900a..ab82ee97 100644
--- a/src/components/generic-accounts.css
+++ b/src/components/generic-accounts.css
@@ -1,4 +1,24 @@
 #generic-accounts-container {
+  .post-preview {
+    --max-height: 120px;
+    max-height: var(--max-height);
+    overflow: hidden;
+    margin-block: 8px;
+    border: 1px solid var(--outline-color);
+    border-radius: 8px;
+    pointer-events: none;
+
+    .status {
+      font-size: calc(var(--text-size) * 0.9);
+      mask-image: linear-gradient(
+        to bottom,
+        black calc(var(--max-height) / 2),
+        transparent calc(var(--max-height) - 8px)
+      );
+      filter: saturate(0.5);
+    }
+  }
+
   .accounts-list {
     --list-gap: 16px;
     list-style: none;
diff --git a/src/components/generic-accounts.jsx b/src/components/generic-accounts.jsx
index 0fdd557e..1b502a94 100644
--- a/src/components/generic-accounts.jsx
+++ b/src/components/generic-accounts.jsx
@@ -12,10 +12,12 @@ import useLocationChange from '../utils/useLocationChange';
 import AccountBlock from './account-block';
 import Icon from './icon';
 import Loader from './loader';
+import Status from './status';
 
 export default function GenericAccounts({
   instance,
   excludeRelationshipAttrs = [],
+  postID,
   onClose = () => {},
 }) {
   const { masto, instance: currentInstance } = api();
@@ -129,6 +131,8 @@ export default function GenericAccounts({
     }
   }, [snapStates.reloadGenericAccounts.counter]);
 
+  const post = states.statuses[postID];
+
   return (
     <div id="generic-accounts-container" class="sheet" tabindex="-1">
       <button type="button" class="sheet-close" onClick={onClose}>
@@ -138,6 +142,11 @@ export default function GenericAccounts({
         <h2>{heading || 'Accounts'}</h2>
       </header>
       <main>
+        {post && (
+          <div class="post-preview">
+            <Status status={post} size="s" readOnly />
+          </div>
+        )}
         {accounts.length > 0 ? (
           <>
             <ul class="accounts-list">
diff --git a/src/components/modals.jsx b/src/components/modals.jsx
index 49437959..17474e92 100644
--- a/src/components/modals.jsx
+++ b/src/components/modals.jsx
@@ -179,6 +179,7 @@ export default function Modals() {
             excludeRelationshipAttrs={
               snapStates.showGenericAccounts.excludeRelationshipAttrs
             }
+            postID={snapStates.showGenericAccounts.postID}
             onClose={() => (states.showGenericAccounts = false)}
           />
         </Modal>
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 971f07cc..beacb6a9 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -724,25 +724,6 @@ function Status({
   const isPinnable = ['public', 'unlisted', 'private'].includes(visibility);
   const StatusMenuItems = (
     <>
-      {isSizeLarge && (
-        <>
-          <MenuItem
-            onClick={() => {
-              states.showGenericAccounts = {
-                heading: 'Boosted/Liked by…',
-                fetchAccounts: fetchBoostedLikedByAccounts,
-                instance,
-                showReactions: true,
-              };
-            }}
-          >
-            <Icon icon="react" />
-            <span>
-              Boosted/Liked by<span class="more-insignificant">…</span>
-            </span>
-          </MenuItem>
-        </>
-      )}
       {!isSizeLarge && sameInstance && (
         <>
           <div class="menu-control-group-horizontal status-menu">
@@ -840,6 +821,29 @@ function Status({
           </div>
         </>
       )}
+      {!isSizeLarge && sameInstance && (isSizeLarge || showActionsBar) && (
+        <MenuDivider />
+      )}
+      {(isSizeLarge || showActionsBar) && (
+        <>
+          <MenuItem
+            onClick={() => {
+              states.showGenericAccounts = {
+                heading: 'Boosted/Liked by…',
+                fetchAccounts: fetchBoostedLikedByAccounts,
+                instance,
+                showReactions: true,
+                postID: sKey,
+              };
+            }}
+          >
+            <Icon icon="react" />
+            <span>
+              Boosted/Liked by<span class="more-insignificant">…</span>
+            </span>
+          </MenuItem>
+        </>
+      )}
       {(enableTranslate || !language || differentLanguage) && <MenuDivider />}
       {enableTranslate ? (
         <div class={supportsTTS ? 'menu-horizontal' : ''}>