initial commit - add collapse and expand all buttons for the folders

packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx

@@ -1,6 +1,39 @@
 import * as icons from '@standardnotes/icons'
+import { SVGProps } from 'react'
+
+const CollapseAllIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <polyline points="17 11 12 6 7 11" />
+    <polyline points="17 18 12 13 7 18" />
+  </svg>
+)
+
+const ExpandAllIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <polyline points="7 13 12 18 17 13" />
+    <polyline points="7 6 12 11 17 6" />
+  </svg>
+)
 
 export const IconNameToSvgMapping = {
+  'collapse-all': CollapseAllIcon,
+  'expand-all': ExpandAllIcon,
   'account-circle': icons.AccountCircleIcon,
   'align-center': icons.FormatAlignCenterIcon,
   'align-justify': icons.FormatAlignJustifyIcon,

packages/web/src/javascripts/Components/Tags/TagsSection.tsx

@@ -1,3 +1,4 @@
+import IconButton from '@/Components/Button/IconButton'
 import TagsList from '@/Components/Tags/TagsList'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
@@ -27,7 +28,25 @@ const TagsSection: FunctionComponent = () => {
         <div className={'section-title-bar'}>
           <div className="section-title-bar-header">
             <TagsSectionTitle features={application.featuresController} />
-            {!application.navigationController.isSearching && <TagsSectionAddButton />}
+            {!application.navigationController.isSearching && (
+              <div className="flex flex-row items-center gap-1.5">
+                <IconButton
+                  focusable={true}
+                  icon={"collapse-all" as any}
+                  title="Collapse all folders"
+                  className="p-0 text-neutral hover:text-text transition-colors duration-150"
+                  onClick={() => application.navigationController.collapseAllTags()}
+                />
+                <IconButton
+                  focusable={true}
+                  icon={"expand-all" as any}
+                  title="Expand all folders"
+                  className="p-0 text-neutral hover:text-text transition-colors duration-150"
+                  onClick={() => application.navigationController.expandAllTags()}
+                />
+                <TagsSectionAddButton />
+              </div>
+            )}
           </div>
         </div>
         <TagsList type="all" />

packages/web/src/javascripts/Controllers/Navigation/NavigationController.ts

@@ -687,6 +687,36 @@ export class NavigationController
     }
   }
 
+  public collapseAllTags() {
+    const tagsToCollapse = this.tags.filter((tag) => this.getChildren(tag).length > 0 && tag.expanded)
+    if (tagsToCollapse.length === 0) {
+      return
+    }
+    this.mutator
+      .changeItems<TagMutator>(tagsToCollapse, (mutator) => {
+        mutator.expanded = false
+      })
+      .then(() => {
+        this.sync.sync().catch(console.error)
+      })
+      .catch(console.error)
+  }
+
+  public expandAllTags() {
+    const tagsToExpand = this.tags.filter((tag) => this.getChildren(tag).length > 0 && !tag.expanded)
+    if (tagsToExpand.length === 0) {
+      return
+    }
+    this.mutator
+      .changeItems<TagMutator>(tagsToExpand, (mutator) => {
+        mutator.expanded = true
+      })
+      .then(() => {
+        this.sync.sync().catch(console.error)
+      })
+      .catch(console.error)
+  }
+
   private setDisplayOptionsAndReloadTags = () => {
     this.items.setTagsAndViewsDisplayOptions({
       searchQuery: {

packages/web/web.webpack.config.js

@@ -107,7 +107,7 @@ module.exports = (env) => {
            * they may contain class properties and other ES6+ syntax.
            */
           exclude:
-            /node_modules\/(?!(@standardnotes\/common|@standardnotes\/domain-core|webextension-polyfill|yoga-layout))/,
+            /node_modules[\\\/](?!(@standardnotes[\\\/]common|@standardnotes[\\\/]domain-core|webextension-polyfill|yoga-layout))/,
           use: [
             'babel-loader',
             {