feat: add tag count to tree view (#3970)

* Add tag count to tree view * Only display tag amounts > 1 * Updated tag amount var name to be more descriptive * - Moved display logic to html in return - Updated var names to closer match var passed in by TagSection component
usememos · Oct 2, 2024 · f0d43c9 · f0d43c9
1 parent 4ab06f5
commit f0d43c9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx
@@ -86,7 +86,7 @@ const TagsSection = (props: Props) => {
       </div>
       {tagAmounts.length > 0 ? (
         treeMode ? (
-          <TagTree tags={tagAmounts.map((t) => t[0])} />
+          <TagTree tagAmounts={tagAmounts} />
         ) : (
           <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
             {tagAmounts.map(([tag, amount]) => (

diff --git a/web/src/components/TagTree.tsx b/web/src/components/TagTree.tsx
@@ -6,36 +6,43 @@ import { useMemoFilterStore } from "@/store/v1";
 interface Tag {
   key: string;
   text: string;
+  amount: number;
   subTags: Tag[];
 }
 
 interface Props {
-  tags: string[];
+  tagAmounts: [tag: string, amount: number][];
 }
 
-const TagTree = ({ tags: rawTags }: Props) => {
+const TagTree = ({ tagAmounts: rawTagAmounts }: Props) => {
   const [tags, setTags] = useState<Tag[]>([]);
 
   useEffect(() => {
-    const sortedTags = Array.from(rawTags).sort();
+    const sortedTagAmounts = Array.from(rawTagAmounts).sort();
     const root: Tag = {
       key: "",
       text: "",
+      amount: 0,
       subTags: [],
     };
 
-    for (const tag of sortedTags) {
-      const subtags = tag.split("/");
+    for (const tagAmount of sortedTagAmounts) {
+      const subtags = tagAmount[0].split("/");
       let tempObj = root;
       let tagText = "";
 
       for (let i = 0; i < subtags.length; i++) {
         const key = subtags[i];
+        let amount: number = 0;
+
         if (i === 0) {
           tagText += key;
         } else {
           tagText += "/" + key;
         }
+        if (sortedTagAmounts.some(([tag, amount]) => tag === tagText && amount > 1)) {
+          amount = tagAmount[1];
+        }
 
         let obj = null;
 
@@ -50,6 +57,7 @@ const TagTree = ({ tags: rawTags }: Props) => {
           obj = {
             key,
             text: tagText,
+            amount: amount,
             subTags: [],
           };
           tempObj.subTags.push(obj);
@@ -60,7 +68,7 @@ const TagTree = ({ tags: rawTags }: Props) => {
     }
 
     setTags(root.subTags as Tag[]);
-  }, [rawTags]);
+  }, [rawTagAmounts]);
 
   return (
     <div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap gap-2 mt-1">
@@ -111,7 +119,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
             <HashIcon className="w-4 h-auto shrink-0 mr-1 text-gray-400 dark:text-gray-500" />
           </div>
           <span className="truncate cursor-pointer hover:opacity-80" onClick={handleTagClick}>
-            {tag.key}
+            {tag.key} {tag.amount > 1 && `(${tag.amount})`}
           </span>
         </div>
         <div className="flex flex-row justify-end items-center">