Application Shell¶

File: custom-ui/src/frontend/application-shell.ts

Overview¶

Replaces Theia's default ApplicationShell and SidePanelHandler to implement PlainScript's top-oriented tab layout and accessibility-focused panel management. Also provides a FrontendApplicationContribution that opens the default view layout once Theia has initialised.

Functions¶

`initApplicationShell`¶

export function initApplicationShell({
  bind,
  rebind,
}: {
  bind: interfaces.Bind;
  rebind: interfaces.Rebind;
}): void;

InversifyJS wiring entry point. Called from the root ContainerModule.

Bindings applied:

Action	From	To
`rebind`	`TheiaApplicationShell`	`ApplicationShell` (singleton)
`rebind`	`TheiaSidePanelHandler`	`SidePanelHandler` (singleton)
`bind`	—	`ShellInitContribution` (singleton)
`bind`	`FrontendApplicationContribution`	`ShellInitContribution` (service alias)

Classes¶

`ShellInitContribution`¶

@injectable()
export class ShellInitContribution extends DefaultFrontendApplicationContribution

A FrontendApplicationContribution that opens the default panel layout when Theia is ready.

Injected Dependencies¶

Property	Type	Purpose
`navigatorContribution`	`FileNavigatorContribution`	Opens the Files panel in the left area
`searchContribution`	`SearchInWorkspaceFrontendContribution`	Opens the Search panel (hidden) in the left area
`outputContribution`	`OutputContribution`	Opens the Output panel in the bottom area
`appStateService`	`FrontendApplicationStateService`	Listens for the `"ready"` state to add a CSS class

Methods¶

Method	Return	Description
`onDidInitializeLayout()`	`Promise<void>`	Calls `openDefaultLayout()` after Theia has built the initial layout
`onStart()`	`Promise<void>`	Adds `theia-app-ready` CSS class to `document.body` when state is `"ready"`
`openDefaultLayout()`	`Promise<void>`	Opens Navigator (left, rank 100), Search (left hidden, rank 200), and Output (bottom, revealed)

`SidePanelHandler`¶

@injectable()
export class SidePanelHandler extends TheiaSidePanelHandler

Overrides Theia's SidePanelHandler to reposition the tab bar to the top of the side panel and to prevent panel collapsing (keeping tabs always visible for accessibility).

Overridden Methods¶

`createSideBar(): SideTabBar`¶

Calls super.createSideBar(), then:

Sets tabsMovable = false — prevents accidental reordering.
Removes Theia's positional CSS classes (theia-app-left, theia-app-right).
Adds theia-app-top — triggers the top-oriented tab-bar CSS.

`createContainer(): Panel`¶

Builds a vertical BoxLayout (top-to-bottom) that stacks:

A headerPanel (role=navigation, aria-label="Editor panel navigation") containing the tab bar and top menu.
The toolbar.
The dock panel.

This places tabs above content instead of Theia's default side position.

`collapse(): Promise<void>`¶

override async collapse(): Promise<void> {
  return;   // no-op — prevents panels from collapsing
}

Disabling collapse ensures keyboard users can never accidentally hide a panel.