Refactor code structure in `app.js`

Our app.js file has grown quite a bit over time, and I think the internal code structure has become continuously harder to work with. For example:

• The high-level structure could be clearer and more expressive: in which order do we do things? Can we e.g. group things better, so that it’s clear what belongs together and what doesn’t?
• We have some redundancies, especially around looking up elements by id (getElementById). For our web components, we usually do this look up once, and then share it via a this._elements field.
• There are some function definitions in the first half of the file. Would we be able to split them out into one or more separate files, to make the file more concise overall?

Start by reading app/static/js/app.js and map its high-level sections, function definitions, and repeated getElementById lookups. Compare the existing web-component pattern using this._elements, then propose a clearer structure and file split while preserving current behavior. Done means the refactoring scope is agreed and app.js is easier to navigate without changing functionality.