Fix/UI fixes

[gokugiant]

This pull request introduces improvements to both the live view UI and the connection settings workflow, focusing on better user experience and code maintainability. The most significant changes include enhancements to placeholder handling in the live view, a redesigned connection settings form with smarter defaults and clearer separation between automatic and advanced configuration, and general UI/UX refinements.

Live View UI Improvements

• Added a user-friendly placeholder to the live view area when the stream is not active, including a large camera icon, status text ("Stream nicht aktiv"), and a loading spinner for clear feedback. (frontend/src/axon/LiveViewControlWrapper.js, frontend/src/axon/LiveViewControlWrapper.jsR305-R338)
• Refactored the live view container from a div to a Box with improved styling: minimum height, background color, border, and rounded corners to prevent collapse and enhance visual consistency. (frontend/src/axon/LiveViewControlWrapper.js, [1] [2]

Connection Settings UX and Logic

• Redesigned the connection settings form to prioritize auto-detection of connection parameters from the current URL, with local state initialization using Redux values or smart defaults. Advanced settings are now clearly separated in an accordion, only shown when expanded, and accompanied by explanatory alerts. (frontend/src/components/ConnectionSettings.jsx, [1] [2] [3]
• Updated helper texts and labels to clarify that manual configuration is only needed for development or remote access, and provided override options for hostname and ports. (frontend/src/components/ConnectionSettings.jsx, [1] [2] [3]

Code Quality and Consistency

• Improved code style and consistency by adding trailing commas to multiline function arguments and object literals, and updating logging statements for readability. (frontend/src/axon/LiveViewControlWrapper.js, [1] [2] [3] [4] [5]; frontend/src/components/ConnectionSettings.jsx, [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16]; frontend/src/components/StreamControls.js, [17] [18]

These changes collectively make the frontend more robust, intuitive, and maintainable.

[Copilot]

Pull request overview

This PR improves frontend UX around live streaming and backend connectivity configuration, with additional UI polish and formatting consistency updates.

Changes:

• Adds a “stream inactive” placeholder UI in the live view and refactors the live view container styling.
• Redesigns the connection settings workflow to prefer URL-based smart defaults and hides advanced configuration behind an accordion.
• Small UX tweaks (e.g., disabling snap/record inputs while live view is inactive) and formatting/style consistency updates.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
frontend/src/axon/LiveViewControlWrapper.js	Adds inactive-stream placeholder UI and refactors the viewer container to a styled MUI Box.
frontend/src/components/ConnectionSettings.jsx	Reworks connection settings initialization and presents advanced overrides in an accordion.
frontend/src/components/StreamControls.js	Disables snap/record controls unless the live view stream is active.
frontend/src/constants/appRegistry.js	Updates app registry metadata (notably app IDs/essential flags) and minor formatting changes.

Comments suppressed due to low confidence (1)

frontend/src/components/ConnectionSettings.jsx:150

• The auto-test branch returns a cleanup that only clears the timeout (return () => clearTimeout(timer);) and does not dispatch the "pausePeriodicTests" resume event. If the component unmounts before the effect re-runs (after setHasAutoTested(true)), periodic checks can remain paused in frontend/src/middleware/WebSocketHandler.js. Consider using a single cleanup function that always resumes periodic tests, and additionally clears any pending timeout when present.

        );
      }, 1500); // Delay to allow component to settle

      return () => clearTimeout(timer);
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.