Add an option to hide bookmark count

content-scripts/src/modules/features/static.js

@@ -49,9 +49,10 @@ import {
   KeyVerifiedOrgsButton,
   KeyWriterMode,
   KeyXPremiumButton,
+  KeyBookmarkCount,
 } from "../../../../storage-keys";
 import { changeCustomCss } from "../options/customCss";
-import { changeFollowingAndFollowersCounts, changeLikeCount, changeReplyCount, changeRetweetCount } from "../options/hideVanityCounts";
+import { changeFollowingAndFollowersCounts, changeLikeCount, changeReplyCount, changeRetweetCount, changeBookmarkCount } from "../options/hideVanityCounts";
 import changeHideViewCounts from "../options/hideViewCount";
 import { changeHideSearchBar, changeInterFont, changeTitleNotifications, changeTransparentSearchBar, changeTweetButton } from "../options/interface";
 import {
@@ -110,6 +111,7 @@ export const staticFeatures = {
     changeReplyCount(data[KeyReplyCount]);
     changeRetweetCount(data[KeyRetweetCount]);
     changeLikeCount(data[KeyLikeCount]);
+    changeBookmarkCount(data[KeyBookmarkCount])
   },
   navigation: (data) => {
     changeSidebarLogo(data[KeySidebarLogo]);

content-scripts/src/modules/options/hideVanityCounts.js

@@ -73,3 +73,21 @@ export const changeFollowingAndFollowersCounts = (followCount) => {
       break;
   }
 };
+
+export const changeBookmarkCount = (bookmarkCount) => {
+  switch (bookmarkCount) {
+    case "hide":
+      addStyles(
+        "bookmarkCount",
+        `[data-testid="bookmark"] span,
+        [data-testid="removeBookmark"] span {
+           visibility: hidden; 
+        }`
+      );
+      break;
+
+    case "show":
+      removeStyles("bookmarkCount");
+      break;
+  }
+}

popup/components/controls/VanityCheckboxes.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { KeyAllVanity, KeyFollowCount, KeyLikeCount, KeyReplyCount, KeyRetweetCount } from "../../../storage-keys";
+import { KeyAllVanity, KeyFollowCount, KeyLikeCount, KeyReplyCount, KeyRetweetCount, KeyBookmarkCount } from "../../../storage-keys";
 import { getStorage, setStorage } from "../../utilities/chromeStorage";
 import ToggleChevron from "../ui/ToggleChevron";
 import { CheckboxControl } from "../ui/checkboxes";
@@ -11,6 +11,7 @@ const VanityCheckboxes = () => {
   const [hideRetweet, setHideRetweet] = useState(false);
   const [hideLike, setHideLike] = useState(false);
   const [hideFollow, setHideFollow] = useState(false);
+  const [hideBookmark, setHideBookmark] = useState(false);
 
   useEffect(() => {
     const getUserDefaultAll = async () => {
@@ -55,12 +56,21 @@ const VanityCheckboxes = () => {
         console.warn(error);
       }
     };
+    const getUserDefaultBookmark = async () => {
+      try {
+        const userDefaultBookmark = await getStorage(KeyBookmarkCount);
+        userDefaultBookmark && setHideBookmark(userDefaultBookmark === "hide" ? true : false);
+      } catch (error) {
+        console.warn(error);
+      }
+    };
 
     getUserDefaultAll();
     getUserDefaultReply();
     getUserDefaultLike();
     getUserDefaultRetweet();
     getUserDefaultFollow();
+    getUserDefaultBookmark();
   }, []);
 
   const onCheckedChange = async (type, checked) => {
@@ -71,13 +81,15 @@ const VanityCheckboxes = () => {
         setHideRetweet(checked);
         setHideLike(checked);
         setHideFollow(checked);
+        setHideBookmark(checked);
         try {
           await setStorage({
             [KeyAllVanity]: checked ? "hide" : "show",
             [KeyReplyCount]: checked ? "hide" : "show",
             [KeyRetweetCount]: checked ? "hide" : "show",
             [KeyLikeCount]: checked ? "hide" : "show",
             [KeyFollowCount]: checked ? "hide" : "show",
+            [KeyBookmarkCount]: checked ? "hide": "show",
           });
         } catch (error) {
           console.warn(error);
@@ -127,6 +139,17 @@ const VanityCheckboxes = () => {
           console.warn(error);
         }
         break;
+
+      case "bookmark":
+        setHideBookmark(checked);
+        try {
+          await setStorage({
+            [KeyBookmarkCount]: checked ? "hide" : "show",
+          });
+        } catch (error) {
+          console.warn(error);
+        }
+        break;
     }
   };
 
@@ -146,6 +169,7 @@ const VanityCheckboxes = () => {
           <CheckboxControl crossedIcon id="retweet" label="Retweet Count from Tweets" onCheckedChange={(checked) => onCheckedChange("retweet", checked)} checked={hideRetweet} />
           <CheckboxControl crossedIcon id="like" label="Like Count from Tweets" onCheckedChange={(checked) => onCheckedChange("like", checked)} checked={hideLike} />
           <CheckboxControl crossedIcon id="follow" label="Follower/Following Count" onCheckedChange={(checked) => onCheckedChange("follow", checked)} checked={hideFollow} />
+          <CheckboxControl crossedIcon id="bookmark" label="Bookmark Count from Tweets" onCheckedChange={(checked) => onCheckedChange("bookmark", checked)} checked={hideBookmark} />
         </div>
       )}
     </>

storage-keys.js

@@ -31,6 +31,7 @@ export const KeyReplyCount = "replyCount";
 export const KeyRetweetCount = "retweetCount";
 export const KeyLikeCount = "likeCount";
 export const KeyFollowCount = "followCount";
+export const KeyBookmarkCount = "bookmarkCount";
 export const KeyTweetButton = "tweetButton";
 export const KeySearchBar = "searchBar";
 export const KeyTransparentSearch = "transparentSearch";