combine "show-all" and "hide-all" buttons

I think a toggle button is better than having two separate buttons. The toggle button changes states based on if the boxes are visible or not.

I found several issues with this.

1. Firstly it isn't functionally the same; with this there is no way to instantly show/hide all the boxes.
2. If I start with all boxes visible, the button says "HIDE ALL" but if I individually hide every box; the button still says "HIDE ALL".
3. Similarly if I start with all boxes hidden, the button says "SHOW AL" but if I individually make every box visible it still says "SHOW ALL"
4. It is confusing for the user to see some of the boxes visible and a button saying "HIDE ALL"; but upon clicking that button instead of all the boxes being hidden (like you'd expect from what the button says); it hides the ones that were visible and instead shows the ones that were hidden.

I think if points 2 and 3 were fixed this could possibly be a useful additional feature.

I found several issues with this.

1. Firstly it isn't functionally the same; with this there is no way to instantly show/hide all the boxes.
2. If I start with all boxes visible, the button says "HIDE ALL" but if I individually hide every box; the button still says "HIDE ALL".
3. Similarly if I start with all boxes hidden, the button says "SHOW AL" but if I individually make every box visible it still says "SHOW ALL"
4. It is confusing for the user to see some of the boxes visible and a button saying "HIDE ALL"; but upon clicking that button instead of all the boxes being hidden (like you'd expect from what the button says); it hides the ones that were visible and instead shows the ones that were hidden.

I think if points 2 and 3 were fixed this could possibly be a useful additional feature.

Biggest issue is managing state and rendering the correct state. I will try to work on the bugs. Can I implement some hacky state management to tackle this?