From 50eb9b9f59722be289365944b9dadb875da8f9cc Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 9 Mar 2023 21:51:50 +0800
Subject: [PATCH] Improve context menu design

---
 src/app.css               |  24 ++++++-
 src/components/icon.jsx   |  10 ++-
 src/components/status.jsx | 133 +++++++++++++++++++++++++-------------
 3 files changed, 119 insertions(+), 48 deletions(-)

diff --git a/src/app.css b/src/app.css
index 39862a70..62026ad4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1100,10 +1100,16 @@ body:has(.status-deck) .media-post-link {
   line-height: 1;
   padding: 8px 16px !important;
   transition: all 0.1s ease-in-out;
+  text-decoration: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-decoration: none;
+}
+.szh-menu .szh-menu__item span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.05;
 }
 .szh-menu .szh-menu__item * {
   vertical-align: middle;
@@ -1141,6 +1147,22 @@ body:has(.status-deck) .media-post-link {
   text-overflow: ellipsis;
   overflow: hidden;
 }
+.szh-menu .menu-double-lines {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.szh-menu .menu-double-lines span {
+  white-space: normal;
+}
+.szh-menu .menu-horizontal {
+  display: flex;
+}
+.szh-menu .menu-horizontal .szh-menu__item {
+  flex: 1;
+}
 .szh-menu .szh-menu__item .menu-shortcut {
   opacity: 0.5;
   font-weight: normal;
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index 805823d9..afaa5f9b 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -68,7 +68,14 @@ const ICONS = {
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
 
-function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
+function Icon({
+  icon,
+  size = 'm',
+  alt,
+  title,
+  class: className = '',
+  style = {},
+}) {
   if (!icon) return null;
 
   const iconSize = SIZES[size];
@@ -97,6 +104,7 @@ function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
         display: 'inline-block',
         overflow: 'hidden',
         lineHeight: 0,
+        ...style,
       }}
     >
       {iconData && (
diff --git a/src/components/status.jsx b/src/components/status.jsx
index a6ad82a5..b85c91e5 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -373,7 +373,7 @@ function Status({
           </MenuHeader>
           <MenuLink to={instance ? `/${instance}/s/${id}` : `/s/${id}`}>
             <Icon icon="arrow-right" />
-            View post and replies
+            <span>View post by @{username || acct}</span>
           </MenuLink>
         </>
       )}
@@ -408,7 +408,12 @@ function Status({
                 } catch (e) {}
               }}
             >
-              <Icon icon="rocket" />
+              <Icon
+                icon="rocket"
+                style={{
+                  color: reblogged && 'var(--reblog-color)',
+                }}
+              />
               <span>{reblogged ? 'Unboost' : 'Boost…'}</span>
             </MenuItem>
           )}
@@ -421,7 +426,12 @@ function Status({
               } catch (e) {}
             }}
           >
-            <Icon icon="heart" />
+            <Icon
+              icon="heart"
+              style={{
+                color: favourited && 'var(--favourite-color)',
+              }}
+            />
             <span>{favourited ? 'Unfavourite' : 'Favourite'}</span>
           </MenuItem>
           <MenuItem
@@ -433,62 +443,69 @@ function Status({
               } catch (e) {}
             }}
           >
-            <Icon icon="bookmark" />
+            <Icon
+              icon="bookmark"
+              style={{
+                color: bookmarked && 'var(--favourite-color)',
+              }}
+            />
             <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
           </MenuItem>
+          {enableTranslate && (
+            <MenuItem
+              disabled={forceTranslate}
+              onClick={() => {
+                setForceTranslate(true);
+              }}
+            >
+              <Icon icon="translate" />
+              <span>Translate</span>
+            </MenuItem>
+          )}
           <MenuDivider />
         </>
       )}
       <MenuItem href={url} target="_blank">
         <Icon icon="external" />
-        <span>Open link to post</span>
+        <small class="menu-double-lines">{nicePostURL(url)}</small>
       </MenuItem>
-      <MenuItem
-        onClick={() => {
-          // Copy url to clipboard
-          try {
-            navigator.clipboard.writeText(url);
-            showToast('Link copied');
-          } catch (e) {
-            console.error(e);
-            showToast('Unable to copy link');
-          }
-        }}
-      >
-        <Icon icon="link" />
-        <span>Copy link to post</span>
-      </MenuItem>
-      {enableTranslate && (
+      <div class="menu-horizontal">
         <MenuItem
-          disabled={forceTranslate}
           onClick={() => {
-            setForceTranslate(true);
+            // Copy url to clipboard
+            try {
+              navigator.clipboard.writeText(url);
+              showToast('Link copied');
+            } catch (e) {
+              console.error(e);
+              showToast('Unable to copy link');
+            }
           }}
         >
-          <Icon icon="translate" />
-          <span>Translate</span>
+          <Icon icon="link" />
+          <span>Copy</span>
         </MenuItem>
-      )}
-      {navigator?.share &&
-        navigator?.canShare?.({
-          url,
-        }) && (
-          <MenuItem
-            onClick={() => {
-              try {
-                navigator.share({
-                  url,
-                });
-              } catch (e) {
-                console.error(e);
-                alert("Sharing doesn't seem to work.");
-              }
-            }}
-          >
-            <Icon icon="share" />
-            <span>Share…</span>
-          </MenuItem>
-        )}
+        {navigator?.share &&
+          navigator?.canShare?.({
+            url,
+          }) && (
+            <MenuItem
+              onClick={() => {
+                try {
+                  navigator.share({
+                    url,
+                  });
+                } catch (e) {
+                  console.error(e);
+                  alert("Sharing doesn't seem to work.");
+                }
+              }}
+            >
+              <Icon icon="share" />
+              <span>Share…</span>
+            </MenuItem>
+          )}
+      </div>
       {isSelf && (
         <>
           <MenuDivider />
@@ -546,6 +563,9 @@ function Status({
       onContextMenu={(e) => {
         if (size === 'l') return;
         if (e.metaKey) return;
+        console.log('context menu', e);
+        const link = e.target.closest('a');
+        if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
         e.preventDefault();
         setContextMenuAnchorPoint({
           x: e.clientX,
@@ -1537,6 +1557,27 @@ function _unfurlMastodonLink(instance, url) {
   return Promise.any([remoteInstanceFetch, mastoSearchFetch]);
 }
 
+function nicePostURL(url) {
+  const urlObj = new URL(url);
+  const { host, pathname } = urlObj;
+  const path = pathname.replace(/\/$/, '');
+  // split only first slash
+  const [_, username, restPath] = path.match(/\/(@[^\/]+)\/(.*)/) || [];
+  return (
+    <>
+      {host}
+      {username ? (
+        <>
+          /{username}
+          <span class="more-insignificant">/{restPath}</span>
+        </>
+      ) : (
+        <span class="more-insignificant">{path}</span>
+      )}
+    </>
+  );
+}
+
 const unfurlMastodonLink = throttle(_unfurlMastodonLink);
 
 const div = document.createElement('div');