Problem Statement in File Tree: Display problem statement as selectable file in "Edit in Editor" interface

[FelixTJDietrich]

User Story

As an instructor editing programming exercises in the "Edit in Editor" interface
I want the problem statement to appear as a selectable file in the file tree alongside repository files
So that I can edit the problem statement using the editor with syntax highlighting and have a unified editing experience with preview capabilities

Acceptance Criteria

• Given I open the "Edit in Editor" interface for an exercise, When the file tree is displayed, Then I can see a "Problem Statement" entry positioned at the top of the file tree, visually separated from repository folders (template, solution, tests) with a distinct icon and visual styling

• Given the file tree is loaded, When I observe the problem statement entry, Then it is always visible and accessible regardless of the repository state (loading, empty, or populated) and clearly distinguishable from code files through visual design

• Given I click on the "Problem Statement" entry in the file tree, When it becomes selected, Then the Monaco Editor opens in the main editor area displaying the raw markdown content with proper markdown syntax highlighting and editing capabilities

• Given I have selected the problem statement for editing, When the Monaco Editor loads the content, Then a collapsible markdown preview pane automatically appears on the right side of the editor showing the rendered HTML version of the problem statement

• Given I am editing the problem statement in Monaco Editor, When I type or modify the markdown content, Then the preview pane updates the rendered output in real-time with a short debounce delay (e.g., 500ms or shorter depending on performance, test with larger PlantUML diagrams + plenty of linked test cases) to reflect my changes

• Given I am currently viewing the problem statement with the preview pane open, When I click on any repository file (template, solution, or test files), Then the preview pane automatically collapses to maximize space for code editing and the selected file opens in Monaco Editor

• Given I have previously selected a repository file (with preview pane collapsed), When I click back on the "Problem Statement" entry, Then the preview pane automatically re-expands and displays the current problem statement content

• Given I have made changes to the problem statement, When I save the exercise (via save button or Ctrl+S), Then the problem statement content is persisted to the database using the existing storage mechanism without any changes to the current data model

Mockups / Wireframes

TODO