In the current system, AJAX is used to load, add, remove, refresh and sort navlets.

The code is quite hard to follow, and can be simplified a lot by using HTMX to handle most of the backend interactions.

The navlet controllers and webfront/navlet views should be refactored while continuing to support the following features:

• Individual loading of each navlet: It should handle a successful load and render error messages with a header when something happens.
• Adding a new navlet: Should be placed in the left-most column at the top. If the dashboard was previously empty, remove the empty dashboard message.
• Removing a navlet: If there are no navlets left in the dashboard, show an empty dashboard message.
• Re-ordering of navlets by dragging between columns: Should also update when adding/removing navlets.
• Handle custom JS initialization: Certain navlets need to integrate with JS libraries to initialize elements within them, e.g. a room map, getting started wizard or select2 elements in a form.
• Compact dashboard mode: Should toggle compact mode with the dashboard action.
• Individual periodic refresh of navlets: Some navlets need to update their data periodically to reflect the current state of the system. Refresh should only be active when the navlet is in VIEW mode. The new system has to support the following reload types:
  • Standard: Reload the navlet on a specified refresh interval.
  • Image Reload: Reload the image with a bust parameter to avoid caching. Used with graphite queries.
  • AJAX Reload: On a specified interval, fire an event that allows navlets to handle a more complex refresh flow.