feat: add an option to auto expand subtags in tree mode (#4994)

Author: hchengting

web/src/components/HomeSidebar/TagsSection.tsx

@@ -22,6 +22,7 @@ interface Props {
 const TagsSection = observer((props: Props) => {
   const t = useTranslate();
   const [treeMode, setTreeMode] = useLocalStorage<boolean>("tag-view-as-tree", false);
+  const [treeAutoExpand, setTreeAutoExpand] = useLocalStorage<boolean>("tag-tree-auto-expand", false);
   const renameTagDialog = useDialog();
   const [selectedTag, setSelectedTag] = useState<string>("");
   const tags = Object.entries(userStore.state.tagCount)
@@ -75,13 +76,17 @@ const TagsSection = observer((props: Props) => {
                 <span className="text-sm shrink-0">{t("common.tree-mode")}</span>
                 <Switch checked={treeMode} onCheckedChange={(checked) => setTreeMode(checked)} />
               </div>
+              <div className="w-auto flex flex-row justify-between items-center gap-2 p-1">
+                <span className="text-sm shrink-0">{t("common.auto-expand")}</span>
+                <Switch disabled={!treeMode} checked={treeAutoExpand} onCheckedChange={(checked) => setTreeAutoExpand(checked)} />
+              </div>
             </PopoverContent>
           </Popover>
         )}
       </div>
       {tags.length > 0 ? (
         treeMode ? (
-          <TagTree tagAmounts={tags} />
+          <TagTree tagAmounts={tags} expandSubTags={!!treeAutoExpand} />
         ) : (
           <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
             {tags.map(([tag, amount]) => (

web/src/components/TagTree.tsx

@@ -13,9 +13,10 @@ interface Tag {
 
 interface Props {
   tagAmounts: [tag: string, amount: number][];
+  expandSubTags: boolean;
 }
 
-const TagTree = ({ tagAmounts: rawTagAmounts }: Props) => {
+const TagTree = ({ tagAmounts: rawTagAmounts, expandSubTags }: Props) => {
   const [tags, setTags] = useState<Tag[]>([]);
 
   useEffect(() => {
@@ -74,23 +75,28 @@ const TagTree = ({ tagAmounts: rawTagAmounts }: Props) => {
   return (
     <div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap gap-2 mt-1">
       {tags.map((t, idx) => (
-        <TagItemContainer key={t.text + "-" + idx} tag={t} />
+        <TagItemContainer key={t.text + "-" + idx} tag={t} expandSubTags={expandSubTags} />
       ))}
     </div>
   );
 };
 
 interface TagItemContainerProps {
   tag: Tag;
+  expandSubTags: boolean;
 }
 
 const TagItemContainer = observer((props: TagItemContainerProps) => {
-  const { tag } = props;
+  const { tag, expandSubTags } = props;
   const tagFilters = memoFilterStore.getFiltersByFactor("tagSearch");
   const isActive = tagFilters.some((f: MemoFilter) => f.value === tag.text);
   const hasSubTags = tag.subTags.length > 0;
   const [showSubTags, toggleSubTags] = useToggle(false);
 
+  useEffect(() => {
+    toggleSubTags(expandSubTags);
+  }, [expandSubTags]);
+
   const handleTagClick = () => {
     if (isActive) {
       memoFilterStore.removeFilter((f: MemoFilter) => f.factor === "tagSearch" && f.value === tag.text);
@@ -140,7 +146,7 @@ const TagItemContainer = observer((props: TagItemContainerProps) => {
           }`}
         >
           {tag.subTags.map((st, idx) => (
-            <TagItemContainer key={st.text + "-" + idx} tag={st} />
+            <TagItemContainer key={st.text + "-" + idx} tag={st} expandSubTags={expandSubTags} />
           ))}
         </div>
       ) : null}

web/src/locales/en.json

@@ -21,6 +21,7 @@
     "archive": "Archive",
     "archived": "Archived",
     "attachments": "Attachments",
+    "auto-expand": "Auto expand",
     "avatar": "Avatar",
     "basic": "Basic",
     "beta": "Beta",