Redesign the context menu

src/app.css

@@ -1804,7 +1804,7 @@ body > .szh-menu-container {
   align-items: center;
   line-height: 1.1;
   padding: 8px 16px !important;
-  transition: all 0.1s ease-in-out;
+  /* transition: all 0.1s ease-in-out; */
   text-decoration: none;
   white-space: nowrap;
   overflow: hidden;
@@ -1851,6 +1851,7 @@ body > .szh-menu-container {
 }
 .szh-menu__divider {
   background-color: var(--divider-color);
+  margin-block: 4px;
 }
 .szh-menu .szh-menu__item .menu-grow {
   flex-grow: 1;
@@ -1927,6 +1928,52 @@ body > .szh-menu-container {
   opacity: 1;
 }
 
+.szh-menu {
+  .menu-control-group-horizontal {
+    display: grid;
+    /* auto columns */
+    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
+
+    .szh-menu__item {
+      display: flex;
+      flex-direction: column;
+      padding: 8px !important;
+      gap: 2px;
+
+      .icon {
+        opacity: 1;
+
+        + span {
+          font-size: 80%;
+          /* line-height: 1.2; */
+          width: 100%;
+          text-align: center;
+          opacity: 0.5;
+          text-overflow: clip;
+          mask-image: linear-gradient(to left, transparent, black 16px);
+        }
+      }
+    }
+  }
+
+  .menu-control-group-horizontal:first-child,
+  li[aria-hidden='true'] + .menu-control-group-horizontal {
+    margin-top: -8px;
+    margin-bottom: -4px;
+
+    .szh-menu__item {
+      padding-block: 12px !important;
+    }
+
+    > [class^='szh-menu']:first-child {
+      border-top-left-radius: 8px;
+    }
+    > [class^='szh-menu']:last-child {
+      border-top-right-radius: 8px;
+    }
+  }
+}
+
 .szh-menu
   .szh-menu__item--type-checkbox:not(.szh-menu__item--disabled):not(
     .szh-menu__item--hover

src/components/ICONS.jsx

@@ -100,4 +100,5 @@ export const ICONS = {
   building: () => import('@iconify-icons/mingcute/building-5-line'),
   history: () => import('@iconify-icons/mingcute/history-2-line'),
   document: () => import('@iconify-icons/mingcute/document-line'),
+  'arrows-right': () => import('@iconify-icons/mingcute/arrows-right-line'),
 };

src/components/status.css

@@ -1836,6 +1836,43 @@ a.card:is(:hover, :focus):visited {
   animation: bookmarked 1s ease-in-out;
 }
 
+/* STATUS MENU */
+
+.status-menu {
+  .szh-menu__item,
+  .szh-menu__submenu {
+    .icon + span {
+      transition: opacity 1s ease;
+    }
+    &.szh-menu__item--hover .icon + span {
+      opacity: 1;
+    }
+
+    &.checked {
+      &:not(.szh-menu__item--hover) {
+        color: var(--checked-color) !important;
+      }
+
+      .icon + span {
+        opacity: 1;
+      }
+
+      box-shadow: inset 0 -2px 0 var(--checked-color),
+        inset 0 -16px 8px -16px var(--checked-color);
+    }
+  }
+
+  .menu-reblog {
+    --checked-color: var(--reblog-color);
+  }
+  .menu-favourite.checked {
+    --checked-color: var(--favourite-color);
+  }
+  .menu-bookmark.checked {
+    --checked-color: var(--link-color);
+  }
+}
+
 /* ENHANCED CONTENT */
 
 .status .content pre {

src/components/status.jsx

@@ -682,82 +682,34 @@ function Status({
   const actionsRef = useRef();
   const StatusMenuItems = (
     <>
-      {!isSizeLarge && (
+      {isSizeLarge && (
         <>
-          <MenuHeader>
+          <MenuItem
-            <span class="ib">
+            onClick={() => {
-              <Icon icon={visibilityIconsMap[visibility]} size="s" />{' '}
+              states.showGenericAccounts = {
-              <span>{visibilityText[visibility]}</span>
+                heading: 'Boosted/Liked by…',
-            </span>{' '}
+                fetchAccounts: fetchBoostedLikedByAccounts,
-            <span class="ib">
+                instance,
-              {repliesCount > 0 && (
+                showReactions: true,
-                <span>
+              };
-                  <Icon icon="comment2" alt="Replies" size="s" />{' '}
-                  <span>{shortenNumber(repliesCount)}</span>
-                </span>
-              )}{' '}
-              {reblogsCount > 0 && (
-                <span>
-                  <Icon icon="rocket" alt="Boosts" size="s" />{' '}
-                  <span>{shortenNumber(reblogsCount)}</span>
-                </span>
-              )}{' '}
-              {favouritesCount > 0 && (
-                <span>
-                  <Icon icon="heart" alt="Likes" size="s" />{' '}
-                  <span>{shortenNumber(favouritesCount)}</span>
-                </span>
-              )}
-            </span>
-            <br />
-            {createdDateText}
-          </MenuHeader>
-          <MenuLink
-            to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
-            onClick={(e) => {
-              onStatusLinkClick(e, status);
             }}
           >
-            <Icon icon="arrow-right" />
+            <Icon icon="react" />
-            <span>View post by @{username || acct}</span>
+            <span>
-          </MenuLink>
+              Boosted/Liked by<span class="more-insignificant">…</span>
+            </span>
+          </MenuItem>
         </>
       )}
-      {!!editedAt && (
-        <MenuItem
-          onClick={() => {
-            setShowEdited(id);
-          }}
-        >
-          <Icon icon="history" />
-          <span>
-            Show Edit History
-            <br />
-            <small class="more-insignificant">Edited: {editedDateText}</small>
-          </span>
-        </MenuItem>
-      )}
-      {(!isSizeLarge || !!editedAt) && <MenuDivider />}
-      {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-horizontal">
+          <div class="menu-control-group-horizontal status-menu">
+            <MenuItem onClick={replyStatus}>
+              <Icon icon="comment" />
+              <span>
+                {repliesCount > 0 ? shortenNumber(repliesCount) : 'Reply'}
+              </span>
+            </MenuItem>
             <MenuConfirm
               subMenu
               confirmLabel={
@@ -766,6 +718,7 @@ function Status({
                   <span>{reblogged ? 'Unboost?' : 'Boost to everyone?'}</span>
                 </>
               }
+              className={`menu-reblog ${reblogged ? 'checked' : ''}`}
               menuFooter={
                 mediaNoDesc &&
                 !reblogged && (
@@ -789,13 +742,14 @@ function Status({
                 } catch (e) {}
               }}
             >
-              <Icon
+              <Icon icon="rocket" />
-                icon="rocket"
+              <span>
-                style={{
+                {reblogsCount > 0
-                  color: reblogged && 'var(--reblog-color)',
+                  ? shortenNumber(reblogsCount)
-                }}
+                  : reblogged
-              />
+                  ? 'Unboost'
-              <span>{reblogged ? 'Unboost' : 'Boost…'}</span>
+                  : 'Boost…'}
+              </span>
             </MenuConfirm>
             <MenuItem
               onClick={() => {
@@ -810,20 +764,16 @@ function Status({
                   }
                 } catch (e) {}
               }}
+              className={`menu-favourite ${favourited ? 'checked' : ''}`}
             >
-              <Icon
+              <Icon icon="heart" />
-                icon="heart"
+              <span>
-                style={{
+                {favouritesCount > 0
-                  color: favourited && 'var(--favourite-color)',
+                  ? shortenNumber(favouritesCount)
-                }}
+                  : favourited
-              />
+                  ? 'Unlike'
-              <span>{favourited ? 'Unlike' : 'Like'}</span>
+                  : 'Like'}
-            </MenuItem>
+              </span>
-          </div>
-          <div class="menu-horizontal">
-            <MenuItem onClick={replyStatus}>
-              <Icon icon="comment" />
-              <span>Reply</span>
             </MenuItem>
             <MenuItem
               onClick={() => {
@@ -838,18 +788,15 @@ function Status({
                   }
                 } catch (e) {}
               }}
+              className={`menu-bookmark ${bookmarked ? 'checked' : ''}`}
             >
-              <Icon
+              <Icon icon="bookmark" />
-                icon="bookmark"
-                style={{
-                  color: bookmarked && 'var(--link-color)',
-                }}
-              />
               <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
             </MenuItem>
           </div>
         </>
       )}
+      {(enableTranslate || !language || differentLanguage) && <MenuDivider />}
       {enableTranslate ? (
         <div class={supportsTTS ? 'menu-horizontal' : ''}>
           <MenuItem
@@ -900,7 +847,46 @@ function Status({
           </div>
         )
       )}
-      {((!isSizeLarge && sameInstance) || enableTranslate) && <MenuDivider />}
+      {!isSizeLarge ||
+        ((enableTranslate || !language || differentLanguage) && (
+          <MenuDivider />
+        ))}
+      {!isSizeLarge && (
+        <>
+          <MenuDivider />
+          <MenuLink
+            to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
+            onClick={(e) => {
+              onStatusLinkClick(e, status);
+            }}
+          >
+            <Icon icon="arrows-right" />
+            <small>
+              View post by @{username || acct}
+              <br />
+              <span class="more-insignificant">
+                {visibilityText[visibility]} • {createdDateText}
+              </span>
+            </small>
+          </MenuLink>
+        </>
+      )}
+      {!!editedAt && (
+        <>
+          <MenuItem
+            onClick={() => {
+              setShowEdited(id);
+            }}
+          >
+            <Icon icon="history" />
+            <small>
+              Show Edit History
+              <br />
+              <span class="more-insignificant">Edited: {editedDateText}</span>
+            </small>
+          </MenuItem>
+        </>
+      )}
       <MenuItem href={url} target="_blank">
         <Icon icon="external" />
         <small class="menu-double-lines">{nicePostURL(url)}</small>