From a6ae543b4a589d8664f596a09a0e4c2c5a0d5fdc Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sat, 13 Apr 2024 13:39:15 +0200
Subject: [PATCH] feat(catalog row): add post menu button

---
 .../catalog-row/catalog-row.module.css        | 33 ++++++++++++++---
 src/components/catalog-row/catalog-row.tsx    | 14 ++++++--
 src/themes.css                                | 36 +++++++++++++++++++
 3 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/src/components/catalog-row/catalog-row.module.css b/src/components/catalog-row/catalog-row.module.css
index 63e8128a..d28ba1c8 100644
--- a/src/components/catalog-row/catalog-row.module.css
+++ b/src/components/catalog-row/catalog-row.module.css
@@ -79,11 +79,36 @@
   text-decoration: none;
 }
 
+.postMenuBtnPadding {
+  left: 5px;
+  top: 5px;
+  position: relative;
+}
+
 .postMenuBtn {
   position: absolute;
-  display: inline-block;
-  padding-left: 5px;
+  bottom: 5px;
+  line-height: 1em;
+  color: var(--catalog-post-menu-btn-color);
+  opacity: 0;
+  transition: transform 0.1s;
+}
 
-  width: 1em;
-  height: 1em
+.post:hover .postMenuBtn {
+  opacity: var(--catalog-post-menu-btn-opacity);
+}
+
+.post:hover .postMenuBtn:hover {
+  cursor: pointer;
+  color: var(--catalog-post-menu-btn-hover-color);
+  opacity: var(--catalog-post-menu-btn-hover-opacity);
+}
+
+.postMenuBtn {
+  /* preserve unicode triangle for button, some browsers will use an emoji */
+  font-variant: normal;
+  font-feature-settings: "tnum";
+  -webkit-font-feature-settings: "tnum"; /* Chrome, Opera, and Safari */
+  -moz-font-feature-settings: "tnum";    /* Firefox */
+  font-variant-numeric: tabular-nums;
 }
\ No newline at end of file
diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index 614969a7..3d0a7e99 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
@@ -69,6 +70,8 @@ const CatalogPost = ({ post }: { post: Comment }) => {
     </div>
   );
 
+  const [menuBtnRotated, setMenuBtnRotated] = useState(false);
+
   return (
     <div className={styles.post}>
       {hasThumbnail ? (
@@ -91,8 +94,15 @@ const CatalogPost = ({ post }: { post: Comment }) => {
             / L: <b>{linkCount}</b>
           </span>
         )}
-        <span className={styles.postMenuBtn} title='Thread Menu'>
-          ▶
+        <span className={styles.postMenuBtnPadding}>
+          <span
+            className={styles.postMenuBtn}
+            title='Thread Menu'
+            onClick={() => setMenuBtnRotated(!menuBtnRotated)}
+            style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }}
+          >
+            ▶
+          </span>
         </span>
       </div>
       <Link to={postLink}>
diff --git a/src/themes.css b/src/themes.css
index 4d765322..540ae528 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -24,6 +24,12 @@
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
 
+  /* catalog post */
+  --catalog-post-menu-btn-color: navy;
+  --catalog-post-menu-btn-hover-color: red;
+  --catalog-post-menu-btn-opacity: 0.5;
+  --catalog-post-menu-btn-hover-opacity: 1;
+
   /* desktop buttons */
   --button-desktop-text-color: #00e;
   --button-desktop-text-color-hover: red;
@@ -150,6 +156,12 @@
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
 
+  /* catalog post */
+  --catalog-post-menu-btn-color: navy;
+  --catalog-post-menu-btn-hover-color: #d00;
+  --catalog-post-menu-btn-opacity: 0.5;
+  --catalog-post-menu-btn-hover-opacity: 1;
+
   /* homepage */
   --homepage-infobox-text-color: #000;
   --homepage-infobox-bar-text-color: #000;
@@ -270,6 +282,12 @@
   --board-title-font-size: 32px;
   --board-address-font-size: 10pt;
 
+  /* catalog post */
+  --catalog-post-menu-btn-color: navy;
+  --catalog-post-menu-btn-hover-color: red;
+  --catalog-post-menu-btn-opacity: 0.5;
+  --catalog-post-menu-btn-hover-opacity: 1;
+
   /* desktop buttons */
   --button-desktop-text-color: #00e;
   --button-desktop-text-color-hover: red;
@@ -385,6 +403,12 @@
   --homepage-box-bar-background-color: #98e;
   --homepage-box-bar-text-color-hover: #fff;
 
+  /* catalog post */
+  --catalog-post-menu-btn-color: navy;
+  --catalog-post-menu-btn-hover-color: red;
+  --catalog-post-menu-btn-opacity: 0.5;
+  --catalog-post-menu-btn-hover-opacity: 1;
+
   /* desktop buttons */
   --button-desktop-text-color: #34345c;
   --button-text-decoration: underline;
@@ -497,6 +521,12 @@
   --board-title-font-family: Tahoma, sans-serif;
   --board-address-font-size: x-small;
 
+  /* catalog post */
+  --catalog-post-menu-btn-color: #5f89ac;
+  --catalog-post-menu-btn-hover-color: #5f89ac;
+  --catalog-post-menu-btn-opacity: 0.5;
+  --catalog-post-menu-btn-hover-opacity: 1;
+
   /* desktop buttons */
   --button-desktop-text-color: #81a2be;
   --button-desktop-text-color-hover: #5f89ac;
@@ -610,6 +640,12 @@
   --board-title-text-color: #004a99;
   --board-address-font-size: x-small;
 
+  /* catalog post */
+  --catalog-post-menu-btn-color: #f60;
+  --catalog-post-menu-btn-hover-color: #f30;
+  --catalog-post-menu-btn-opacity: 0.5;
+  --catalog-post-menu-btn-hover-opacity: 1;
+
   /* desktop buttons */
   --button-desktop-text-color: #f60;
   --button-desktop-text-color-hover: #f30;