added button for collapsing/expanding all groups: fixed #37

src/components/Group.tsx

@@ -22,7 +22,18 @@ export const Group = ({ type, children, group }: GroupProps) => {
 	const workspace = app.workspace as VT.Workspace;
 	const isSidebar =
 		type === VT.GroupType.LeftSidebar || type === VT.GroupType.RightSidebar;
-	const [isCollapsed, setIsCollapsed] = useState(isSidebar ? true : false);
+	const globalCollpaseState = useViewState(
+		(state) => state.globalCollapseState
+	);
+	const [isCollapsed, setIsCollapsed] = useState(
+		isSidebar ? true : globalCollpaseState
+	);
+
+	useEffect(() => {
+		if (isSidebar) return;
+		setIsCollapsed(globalCollpaseState);
+	}, [globalCollpaseState]);
+
 	const { groupTitles, setGroupTitle, toggleHiddenGroup } = useViewState();
 	const isHidden = useViewState((state) =>
 		group ? state.hiddenGroups.includes(group.id) : false

src/components/NavigationHeader.tsx

@@ -15,7 +15,10 @@ export const NavigationHeader = () => {
 	const toggleZenMode = useSettings.use.toggleZenMode();
 	const sortStrategy = useTabCache((state) => state.sortStrategy);
 	const { setSortStrategy } = useTabCache();
-	const { lockFocus } = useViewState();
+	const { lockFocus, setAllCollapsed, setAllExpanded } = useViewState();
+	const globalCollapseState = useViewState(
+		(state) => state.globalCollapseState
+	);
 
 	const createAndShowNewTab = () => {
 		const workspace = plugin.app.workspace as VT.Workspace;
@@ -110,6 +113,23 @@ export const NavigationHeader = () => {
 					isActive={zenMode}
 					isNavAction={true}
 				/>
+				<IconButton
+					icon={
+						globalCollapseState
+							? "unfold-vertical"
+							: "fold-vertical"
+					}
+					action="global-collapse"
+					tooltip={
+						globalCollapseState ? "Expand all" : "Collapse all"
+					}
+					onClick={() =>
+						globalCollapseState
+							? setAllExpanded()
+							: setAllCollapsed()
+					}
+					isNavAction={true}
+				/>
 			</div>
 		</div>
 	);

src/models/ViewState.ts

@@ -34,6 +34,7 @@ interface ViewState {
 	hiddenGroups: Array<VT.Identifier>;
 	latestActiveLeaf: VT.WorkspaceLeaf | null;
 	pinningEvents: PinningEvents;
+	globalCollapseState: boolean;
 	clear: () => void;
 	setGroupTitle: (id: VT.Identifier, name: string) => void;
 	toggleHiddenGroup: (id: VT.Identifier, isHidden: boolean) => void;
@@ -59,6 +60,8 @@ interface ViewState {
 		callback: PinningEventCallback
 	) => void;
 	unbindPinningEvent: (leaf: VT.WorkspaceLeaf) => void;
+	setAllCollapsed: () => void;
+	setAllExpanded: () => void;
 }
 
 const saveViewState = (titles: GroupTitles) => {
@@ -115,6 +118,7 @@ export const useViewState = create<ViewState>()((set, get) => ({
 	hiddenGroups: loadHiddenGroups(),
 	latestActiveLeaf: null,
 	pinningEvents: createNewPinningEvents(),
+	globalCollapseState: false,
 	leftButtonClone: null,
 	rightButtonClone: null,
 	topLeftContainer: null,
@@ -290,4 +294,10 @@ export const useViewState = create<ViewState>()((set, get) => ({
 			set({ pinningEvents });
 		}
 	},
+	setAllCollapsed() {
+		set({ globalCollapseState: true });
+	},
+	setAllExpanded() {
+		set({ globalCollapseState: false });
+	},
 }));