Make sidebar items toggleable and save setting in cookie

[JoeyStk]

Short description

This PR adds the functionality to make items in the sidebar of content forms expandable and save the setting as a cookie.

Proposed changes

• Add a class and ids to the items
• Add functionality to make them toggleable (Side notes: a. only the head of the cards is the trigger, please let me know if you think the entire card should be clickable, b. I didn't add an icon to keep it minimal, please let me know if you prefer an icon, e.g. "+", "-" as commonly used for accordions)
• Safe value in cookies and retrieve them to remember previous decision

Side effects

• If you toggle the "Settings on page" section on Desktop screens it still leaves some white space and looks a bit ugly. However my screen is too small to test and/or inspect this issue. If requested I could do this in the next few days on a big screen at the office

Resolved issues

Fixes (partially): #1876

---

Pull Request Review Guidelines

[codeclimate]

Code Climate has analyzed commit 9c70462 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 74.3%.

View more on Code Climate.

[charludo]

Thanks, this is very useful, and works great.

My only complaint (besides the two small suggestions below) is that this sets a cookie for every box. Wouldn't it make more sense to set a single cookie containing a serialized JSON object with box names as the key / hidden status as the value?

[timobrembeck]

Thanks a lot! 🎉

My only complaint (besides the two small suggestions below) is that this sets a cookie for every box. Wouldn't it make more sense to set a single cookie containing a serialized JSON object with box names as the key / hidden status as the value?

Yes, definitely agree! 👍

I would even argue we don't need the value here - just store list of all ids which should be hidden and remove elements from that list which should be shown.

Also, from a security standpoint, it's kind of risky to set cookies to dynamic keys which are derived from the document. I didn't find an immediate way to exploit this, but imagine being able to set the csrftoken cookie to a trivial value just by managing to create a HTML element with the id csrftoken - definitely not ideal...

[JoeyStk]

Thank you a lot for your feedback. Originally I wanted to only commit the HTMl files, but accidentally also committed the Typescript files. If you want to you can take a look at the HTML files and check if this okay as it is. And then we can have a chat about how it would be best to set the cookies

[timobrembeck]

Thanks a lot for your changes! 👍
I really like that we now re-use existing functionality.

And then we can have a chat about how it would be best to set the cookies

I committed a suggestion for the cookie handling - not really perfect yet, but maybe you can play around with it and improve it.
The goal should be to make this also re-usable for other boxes (e.g. on the dashboard) and remember their state as well.

[timobrembeck]

Thanks a lot, really cool feature! 🚀

I noticed that it does not fix #1876 completely (since the issue was about all content forms, also events and POIs), but I think we should merge this PR now since it's a good improvement on its own, and add the event and poi forms later.

I also noticed that it creates problems if the sidebar has only one column (see #1769 (comment)), but I also think it could be part of the separate issue to fix this.

changes have been addressed

[MizukiTemma]

Thank you 👍 Cool feature 😃