feat(startup): add inspection list components

[kyasbal]

Motivation

To separate the startup dialog UI into logical components. This PR adds the components responsible for displaying the list of recent inspections.

Changes

• Added InspectionListComponent and InspectionListItemComponent.
• Added corresponding stories for Storybook.
• Added unit tests.

---

動機

スタートアップダイアログのUIを論理的なコンポーネントに分離するため、このPRでは最近のインスペクション一覧を表示するコンポーネントを追加します。

変更内容

• InspectionListComponent と InspectionListItemComponent を追加しました。
• Storybook用の対応するストーリーを追加しました。
• ユニットテストを追加しました。

[gemini-code-assist]

Code Review

This pull request replaces the angular-split library with golden-layout for the main application interface, introducing a new LayoutService to manage the dynamic layout. Additionally, it implements an inspection activity list with components for displaying task progress, status, and management actions. Feedback includes addressing a potential race condition in the title editing logic, utilizing Material theme variables for styling, and optimizing the layout service by running ResizeObserver outside the Angular zone and using numeric size values.

I am having trouble creating individual review comments. Click here to see my feedback.

web/src/app/dialogs/startup/components/inspection-list-item.component.ts (113-121)

There is a potential logic bug where commitTitleChange might be called after cancelEditing has already been invoked (e.g., pressing Escape triggers cancelEditing, which removes the input from the DOM, subsequently triggering a blur event that calls commitTitleChange). This could lead to an unintended title change emission. Additionally, it's good practice to trim the input and ensure it's not empty before emitting a change.

  protected commitTitleChange(): void {
    if (!this.isEditing()) {
      return;
    }
    this.isEditing.set(false);
    const newTitle = this.taskNameInput().trim();
    if (newTitle !== '' && newTitle !== this.item().label) {
      this.changeInspectionTitle.emit({
        id: this.item().id,
        changeTo: newTitle,
      });
    }
  }

web/src/app/dialogs/startup/components/inspection-list-item.component.scss (22)

Avoid hardcoding color values like #3f51b5. It is better to use the Material theme's primary color to ensure consistency and maintainability across the application.

$primary-color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 500);

web/src/app/services/layout/layout.service.ts (57-69)

In GoldenLayout 2.x, the size property in LayoutConfig is typically a number representing the relative weight of the item. While strings might be coerced, using numbers is more idiomatic and avoids potential parsing issues.

          componentType: 'timeline',
          title: 'Timeline',
          size: 70,
        },
        {
          type: 'component',
          componentType: 'log',
          title: 'Logs',
          size: 15,
        },
        {
          type: 'component',
          componentType: 'diff',
          title: 'History',
          size: 15,

web/src/app/services/layout/layout.service.ts (84-90)

Running ResizeObserver callbacks inside Angular's zone can trigger unnecessary change detection cycles on every resize event. It is more efficient to run this outside of Angular's zone.

    this.ngZone.runOutsideAngular(() => {
      this.resizeObserver = new ResizeObserver(() => {
        this.goldenLayout.setSize(
          hostElement.clientWidth,
          hostElement.clientHeight,
        );
      });
      this.resizeObserver.observe(hostElement);
    });