Simplify TDP connection state

[gzdunek]

The primary goal of this PR is to simplify nextScreenState, which was previously unnecessarily complicated.
Additionally, the previous implementation used useState to manage this state and updated it inside a useEffect, which is a React anti-pattern.

To improve this, wsConnection and tdpConnection attempts were combined into a single tdpConnectionStatus which has the following states:

type TdpConnectionStatus =
  /** Unknown status.*/
  | { status: '' }
  /** The transport connection has been established.*/
  | { status: 'connected' }
  /** The remote desktop is visible as we received the first frame. */
  | { status: 'active' }
  /**
   * The client has disconnected.
   * This can happen either gracefully (on the remote side)
   * or due to closing the transport layer.
   */
  | {
      status: 'disconnected';
      message: string;
    };

Note that we don't keep information about graceful/non-graceful disconnection, everything is mapped to a generic "disconnected" status with a message. Why? Because the UI treats all disconnections the same, displaying the same component regardless of the reason.

I recommend reviewing commit by commit.

PS: This is still not the final version of this component. I’m opening smaller PRs to keep the review process manageable.

[gzdunek]

We had stories that looked the same, I removed them.

[zmb3]

I'll try to run it a bit later.

[avatus]

how was it working before without the lexical binding?

[gzdunek]

It was wrapped in an arrow function:

  const onResize = (e: { height: number; width: number }) => {
     tdpClient.resize(e);
   };

I removed it and called the function directly.

[backport-bot-workflows]

@gzdunek See the table below for backport results.

Branch	Result
branch/v16	Failed
branch/v17	Create PR