Feature/condensed folders tree

src/components/filters.tsx

@@ -233,7 +233,7 @@ const DefaultRoot: Directory = {
     level: -1,
 };
 
-function buildDirTree(paths: string[], expanded: string[]): Directory {
+function buildDirTree(paths: string[], expanded: string[], compactFolders: boolean): Directory {
     const root: Directory = { ...DefaultRoot, subdirs: new Map() };
 
     paths.forEach((path) => {
@@ -258,7 +258,50 @@ function buildDirTree(paths: string[], expanded: string[]): Directory {
         }
     });
 
-    return root;
+    return compactFolders ? compactFoldersTree(root) : root;
+}
+
+function compactFoldersTree(root: Directory): Directory {
+    /*
+    const squashSingleChildFolders = (root: Directory) => {
+        let result = root;
+
+        if (root.subdirs.size === 1) {
+            const [child] = root.subdirs.values();
+            if (root.count === child.count) {
+                child.name = root.name + "/" + child.name;
+                child.level = root.level;
+                result = squashSingleChildFolders(child);
+            }
+        }
+
+        return result;
+    }; */
+
+    const result = squashSingleChildFolders(root);
+
+    for (const [key, dir] of result.subdirs) {
+        dir.level = result.level + 1;
+        const condensedDir = compactFoldersTree(dir);
+        result.subdirs.set(key, condensedDir);
+    }
+
+    return result;
+}
+
+function squashSingleChildFolders(root: Directory): Directory {
+    let result = root;
+
+    if (root.subdirs.size === 1) {
+        const [child] = root.subdirs.values();
+        if (root.count === child.count) {
+            child.name = root.name + "/" + child.name;
+            child.level = root.level;
+            result = squashSingleChildFolders(child);
+        }
+    }
+
+    return result;
 }
 
 function flattenTree(root: Directory): Directory[] {
@@ -297,9 +340,9 @@ export const Filters = React.memo(function Filters({ torrents, currentFilters, s
         [torrents]);
 
     const dirs = useMemo<Directory[]>(() => {
-        const tree = buildDirTree(paths, serverConfig.expandedDirFilters);
+        const tree = buildDirTree(paths, serverConfig.expandedDirFilters, config.values.interface.compactFolders);
         return flattenTree(tree);
-    }, [paths, serverConfig.expandedDirFilters]);
+    }, [paths, serverConfig.expandedDirFilters, config.values.interface.compactFolders]);
 
     const [labels, trackers] = useMemo(() => {
         const labels: Record<string, number> = {};
@@ -325,12 +368,14 @@ export const Filters = React.memo(function Filters({ torrents, currentFilters, s
         }, config.values.interface.filterSections);
     const [sectionsMap, setSectionsMap] = useState(getSectionsMap(sections));
     const [statusFiltersVisibility, setStatusFiltersVisibility] = useState(config.values.interface.statusFiltersVisibility);
+    const [compactFolders, setCompactFolders] = useState(config.values.interface.compactFolders);
 
     useEffect(() => {
         config.values.interface.filterSections = sections;
         config.values.interface.statusFiltersVisibility = statusFiltersVisibility;
+        config.values.interface.compactFolders = compactFolders;
         setSectionsMap(getSectionsMap(sections));
-    }, [config, sections, statusFiltersVisibility]);
+    }, [config, sections, statusFiltersVisibility, compactFolders]);
 
     const [info, setInfo, handler] = useContextMenu();
 
@@ -365,6 +410,11 @@ export const Filters = React.memo(function Filters({ torrents, currentFilters, s
         }
     }, [statusFiltersVisibility, currentFilters, setCurrentFilters]);
 
+    const onCompactFoldersClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        setCompactFolders(!compactFolders);
+    }, [compactFolders]);
+
     return (<>
         <Menu
             openDelay={100}
@@ -441,6 +491,14 @@ export const Filters = React.memo(function Filters({ torrents, currentFilters, s
                 >
                     Status filters
                 </Menu.Item>
+                <Menu.Divider/>
+                <Menu.Item
+                    icon={compactFolders ? <Icon.Check size="1rem" /> : <Box miw="1rem" />}
+                    onMouseEnter={closeStatusFiltersSubmenu}
+                    onMouseDown={onCompactFoldersClick}
+                >
+                    Compact Folders
+                </Menu.Item>
             </MemoSectionsContextMenu>
             {sections[sectionsMap.Status].visible && <div style={{ order: sectionsMap.Status }}>
                 <Divider mx="sm" label="Status" labelPosition="center" />

src/config.ts

@@ -139,6 +139,7 @@ interface Settings {
         sashSizes: Record<SashName, [number, number]>,
         filterSections: SectionsVisibility<FilterSectionName>,
         statusFiltersVisibility: StatusFiltersVisibility,
+        compactFolders: boolean,
         statusBarSections: SectionsVisibility<StatusbarSectionName>,
         showFiltersPanel: boolean,
         showDetailsPanel: boolean,
@@ -242,6 +243,7 @@ const DefaultSettings: Settings = {
                 !["Running", "Magnetizing"].includes(filterName),
             ]),
         ) as Record<StatusFilterName, boolean>,
+        compactFolders: false,
         statusBarSections: StatusbarSections.map((section) => ({
             section,
             visible: true,