Display AI panel in code mode

[jurgenwerk]

This PR is the first step towards adding AI assistant functionality in code mode (previously it was present in interact mode only). There will be more work to make AI more helpful in the code mode context which will be covered in separate PRs (e.g. adding fields to card definitions, card auto attachment behaviour,...)

There are now 4 columns in case the AI panel is open:

‼️ Monaco code editor theming problem

Since there can now be multiple, differently themed Monaco code editors shown on the same page, we have run into a well known issue (microsoft/monaco-editor#338) where monaco editor does not support differently themed editors on the same page:

The reason is that the monaco editor is storing its CSS in a global <style> tag and every new instance rendered will override that CSS with the the newly rendered instance's theme.

Here is an example of the style tag:
monaco-style-tag.txt

I tried to manipulate this tag's contents by namespacing these selectors (by rewriting them) and have 2 style tags that have all these selectors namespaced for bright and dark monaco theme but the solution seemed too hacky, it resulted in editor flashing, and the repaints needed after manipulating style tags probably caused performance degradations.

Workaround with CSS filter

One of the suggestions in microsoft/monaco-editor#338 was to use a filter to achieve a dark theme to simplify the solution so I went with that. So this means using this piece of code on the white themed editor to achieve the dark themed editor:

:global(.preview-code .monaco-editor) {
  filter: invert(1) hue-rotate(151deg) brightness(0.8) grayscale(0.1);
}

Potential drawbacks

1️⃣ The dark theme is changed

Old theme (vs-dark theme):

New theme (standard vs theme + css filter):

We can of course tweak the colors by changing the hue-rotate param but I thought this value looks pretty good.

2️⃣ The dark theme could be unpredictable/inflexible for future requirements

Since the dark theme is a function of the white theme, we can't easily define individual colors in dark theme (can only tweak the css filter).

[github-actions]

Host Test Results

    1 files  ±0      1 suites  ±0   21m 52s ⏱️ +9s
734 tests +1  732 ✔️ +1  2 💤 ±0  0 ❌ ±0 
739 runs  +1  737 ✔️ +1  2 💤 ±0  0 ❌ ±0 

Results for commit 47c35a1. ± Comparison against base commit 673efbc.

♻️ This comment has been updated with latest results.

[FadhlanR]

I tested it in the staging preview, and it works great!

[jurgenwerk]

I was getting the You attempted to get the value of a helper after the helper was destroyed, which is not allowed"
error in the Commands tests: a command sent via SendAiAssistantMessageCommand without autoExecute flag is not automatically executed by the bot test.

My guess is that when the AI panel is opened in interactive mode and a switch to code mode happens, the room gets rerendered (due to operator mode state change) and the intersection observer wants to work on the previous room rendering but it can't since it was destroyed.

[jurgenwerk]

Found a better approach: 47c35a1

[burieberry]

Tested this locally, looks good. Nice workaround for the color theme issue.

[habdelra]

I think the new dark theme looks great