My work in the past couple of weeks included what is probably the most visible change I have made to the AppDB UI: using collapsible panels on the versions pages.

The versions pages are probably the most-used part of the AppDB. It's where users go to find out how well a particular application or game runs, whether there are any known bugs, and what, if anything, they need to do to get it running in Wine. There are four main sections: test results, known bugs, howtos/note, and comments.

Heretofore, the contents of all four sections were fully displayed on entering the page. It looked  messy and was difficult to navigate. New users often didn't realize there were howtos on the page because they didn't bother to scroll down, and even users who knew what they were looking for had to hunt for it in the clutter.

A forum user had suggested using collapsible panels on that page several months ago. I thought it was a good idea, so I decided to take a stab at implementing it.

Adding the panels was easy using Bootstrap; making them behave exactly as I wanted was a bit trickier. The panel headings were now links, and showed up as underlined, which didn't look very nice. I also wanted to add some sort of icon that would toggle with the open/closed state, but my initial attempts made a mess of the heading layout. My mentor gave me a couple of great suggestions for solving those two problems.

That left me with one remaining problem: both the test results and bug links tables had buttons that toggled the display between showing some (the default) or all of the tests/bugs. Clicking on those buttons would refresh the page, causing the panels to collapse. As a user, I'd consider that a major annoyance.

Googling the problem suggested using either cookies or localStorage to retain the state of the panel when the page was refreshed. I opted for the latter, and after some experimenting with  sample scripts, was able to adapt one to the specific needs of the AppDB.

The change was committed, and so far is working well. I'm pleased with the result, and the user who suggested it thanked me.