Preserve the state of DropdownContents in the display store
The <DropdownContent>
component is used all over the details and annotation panels to separate its sections. This is the component that powers this thing:
A lot of information has to be displayed on both of those panels, and we keep on adding more (#765 (closed), #866 (closed), …). While the DropdownContent is supposed to help with that by keeping sections that the user doesn't care about closed, the open/closed state of a dropdown is not preserved when switching to another element, when switching back and forth between annotation and details, or when toggling the side panel in the Display menu. This is due to the dropdowns being very temporary components, re-created quite often.
We could save their open/closed state in the store in a generic way using the display
module:
display: {
dropdowns: {
[id: string]: boolean
}
}
// In a dropdown
store.commit('display/toggleDropdown', { id: … })
// In a parent component
<DropdownContent id="batch" title="Batch annotation">...</DropdownContent>
For example, this would allow the user to just not care about the orientation panel and transcriptions, and the classifications and metadata stay visible, even when switching to other elements.