Files
Thomas Eizinger 56ff469f03 refactor(gui-client): merge all windows into a single view (#9295)
This PR refactors the GUI clients frontend into a single window with a
sidebar. The functionality remains the same but we do make minor UI
improvements on the way. To pull the entire refactor off, we now use
`react` and `flowbite-react` for the GUI. All the communication with the
backend is moved towards one-way commands and events. That means, the
flow is always:

- Backend emits events to update frontend
- Frontend triggers actions in the backend that may or may not result in
further events

This allows us to decouple the GUI from knowing about which side-effects
change what parts of the state. Instead, it simply updates whenever it
receives an event.

- The previous "Advanced Settings" screen is now split into two parts:
Settings and Diagnostics. Later, we will add a "General settings" page
here.
- The tray menu remains identical to the current one. When the user
clicks "Settings" or "About", we open the window and navigate to the
corresponding page.
- The app and git version are now directly embedded in the frontend,
simplifying the interaction between the frontend and the backend
further.

|Before|After|
|---|---|

|![](https://github.com/user-attachments/assets/7e8039c8-d589-495e-92b4-1742f9eb01b2)|![](https://github.com/user-attachments/assets/363184b3-4fcf-45c2-82d2-c466902759ef)|

|![](https://github.com/user-attachments/assets/88163522-cafc-4ad4-90cd-be2e77073b7f)|![](https://github.com/user-attachments/assets/106ef921-38a7-4603-add9-8b0875064737)|

|![](https://github.com/user-attachments/assets/a4bef4b0-5b29-43dd-aea6-0babd3b4ec9e)|![](https://github.com/user-attachments/assets/b84f1b51-c35c-48cc-9335-c653eee597ff)

|![](https://github.com/user-attachments/assets/f0473a0a-cdba-4a15-af98-d97ef422dbc5)|![](https://github.com/user-attachments/assets/ddced01b-6f44-4241-80ea-038a4740915b)|
2025-05-31 01:57:40 +00:00

5 lines
74 B
TypeScript

declare module "*.png" {
const value: string;
export default value;
}