[feature] Collapsible "Add new watch" form in watchlist

[dgtlmoon]

Discussed in #3263

^{Originally posted by Batwam June 14, 2025}
Hello,

I would like to kindly suggest making the "Add new watch" form on the home page collapsible in order to maximise the space for the watchlist itself. In my opinion, the main purpose of the main "watchlist" page is to quickly see the list of website being monitored and this top section takes too much space, especially when accessing on mobile where the content of the watchlist cannot be seen without scrolling down.

Basic implementation shown below using a <details> html block for instance.

collapsed:

expanded:

[dgtlmoon]

nice idea!

[Batwam]

see possible implementation here: master...Batwam:changedetection.io:collapsible_add_watch

I'm not a web developer so the code might not be perfect (which is why I'm not making this a pull request) but might give you some ideas. Essentially I tried to keep the changes to a minimum while keeping it consistent with your existing code.

Animation is optional but more professional/consistent with the rest of the UI. Also, I'm centering the text so it doesn't jump around when expanding (having an extra wide box when collapsed looked odd so that wasn't really an option, also, I couldn't quite work out the logic of the form width as it doesn't seem to match the watchlist width)

[dgtlmoon]

@Batwam i'm thinking about the use-case here, i guess you're using it like some kind of dashboard to just watch things

could also run in some kind of "party mode" or "status dashboard" mode, would be cool (like full screen tiled layout)

[Batwam]

This is the use-case indeed. If you look through this branch, I added some css to create a custom mobile view, including a short preview and hiding what isn't relevant to me:

Technically, it falls outside of the scope of the collapsible menu idea as the Add Watch menu is hidden altogether but the general idea is to make it more mobile/overview friendly in the absence of a PWA or free app.

It basically includes:

• website icon (discussed previously) for faster identification
• custom mobile view to maximise real estate on screen by reducing padding, panel height, maximising table width
• hiding any non-critical info, checkboxes, buttons, icons,...
• change in tags colour and location (blue tags on right) for better readability
• short snapshot preview (up to 4 lines)

I do get the full interface back if I put the phone sideways as this view is only applied when the phone is vertical. There are probably fancier ways to achieve this but I'm keeping the changes to a minimum to minimise merge conflicts which are quite frequent due to the regular updates in watch-overview.html.

[dgtlmoon]

@Batwam very cool, can you show some screenshots of 'chart' and other functionalities? how did you solve the favicon scraping?

[Batwam]

chart is just the tag I applied to the first 2 watches. I made the tags blue to keep the interface to black/grey/blue as I'm not a big fan of the pink. I also aligned the tags to the right (which is something I'd also recommend for the main interface).

The favicon scrapping is based on the same solution discussed previously using the google API to keep it straightforward. There would be alternative ways like relying on the favicon.ico or apple-touch.png of the domain but I'm trying to keep it simple to minimise the maintenance burden.

My understanding is that browsers will be caching these pictures and not downloading them on every refresh. However, if regular icon scraping is an issue, the optimal solution might be to save the icon locally when the watch is created.