feat: enable virtual assistant for all systems (#3409)

closes #3314
closes #3397

Author: sleidig

src/app/child-dev-project/notes/admin-note-details/admin-note-details.component.html

@@ -1,12 +1,12 @@
-<div class="hint-banner" i18n>
+<app-hint-box i18n>
   You can edit how users will see the Note details of a single record. Drag and
   drop fields and sections in this preview of a profile view and group them as
   appropriate. The editor below closely resembles how the form will look for
   users later.
   <br />
   We recommend to keep things simple: Only add fields that you really need for
   your work.
-</div>
+</app-hint-box>
 
 <div class="form-sections">
   <app-admin-entity-form

src/app/child-dev-project/notes/admin-note-details/admin-note-details.component.ts

@@ -1,21 +1,21 @@
-import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { EntityConstructor } from "../../../core/entity/model/entity";
 import { AdminEntityFormComponent } from "../../../core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component";
 import { NoteDetailsConfig } from "../note-details/note-details-config.interface";
 import { FormConfig } from "../../../core/entity-details/form/form.component";
 import { FieldGroup } from "../../../core/entity-details/form/field-group";
 import { getDefaultNoteDetailsConfig } from "../add-default-note-views";
+import { HintBoxComponent } from "#src/app/core/common-components/hint-box/hint-box.component";
 
 /**
  * Admin component for configuring NoteDetails view.
  * Allows users to configure the three form sections with full field editing capabilities.
  */
 @Component({
   selector: "app-admin-note-details",
-  imports: [CommonModule, AdminEntityFormComponent],
+  imports: [CommonModule, AdminEntityFormComponent, HintBoxComponent],
   templateUrl: "./admin-note-details.component.html",
-  styleUrls: ["../../../core/admin/admin-entity/admin-entity-styles.scss"],
 })
 export class AdminNoteDetailsComponent implements OnInit {
   @Input() config: NoteDetailsConfig = {};

src/app/core/admin/admin-entity-details/admin-entity-details/admin-entity-details.component.html

@@ -1,12 +1,12 @@
-<div class="hint-banner" i18n>
+<app-hint-box i18n>
   You can edit how users will see the details of a single record of this type.
   Drag and drop fields and sections in this preview of a profile view and group
   them as appropriate. The editor below closely resembles how the form will look
   for users later.
   <br />
   We recommend to keep things simple: Only add fields that you really need for
   your work.
-</div>
+</app-hint-box>
 
 <app-view-title [disableBackButton]="true" [displayInPlace]="true">
   &lt;Name of displayed {{ this.entityConstructor?.label }}&gt;

src/app/core/admin/admin-entity-details/admin-entity-details/admin-entity-details.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, inject, signal } from "@angular/core";
+import { Component, inject, Input } from "@angular/core";
 import {
   EntityDetailsConfig,
   Panel,
@@ -25,15 +25,13 @@ import {
   moveItemInArray,
 } from "@angular/cdk/drag-drop";
 import { WidgetComponentSelectComponent } from "#src/app/core/admin/admin-entity-details/widget-component-select/widget-component-select.component";
+import { HintBoxComponent } from "#src/app/core/common-components/hint-box/hint-box.component";
 
 @DynamicComponent("AdminEntityDetails")
 @Component({
   selector: "app-admin-entity-details",
   templateUrl: "./admin-entity-details.component.html",
-  styleUrls: [
-    "./admin-entity-details.component.scss",
-    "../../admin-entity/admin-entity-styles.scss",
-  ],
+  styleUrls: ["./admin-entity-details.component.scss"],
   imports: [
     MatTabsModule,
     FaIconComponent,
@@ -48,6 +46,7 @@ import { WidgetComponentSelectComponent } from "#src/app/core/admin/admin-entity
     MatExpansionModule,
     MatIconModule,
     DragDropModule,
+    HintBoxComponent,
   ],
 })
 export class AdminEntityDetailsComponent {

src/app/core/admin/admin-entity-list/admin-entity-list.component.html

@@ -1,10 +1,10 @@
-<div class="hint-banner" i18n>
+<app-hint-box i18n>
   You can edit how users will see the list of all records of this type. Drag and
   drop filters and change table columns in this preview. The editor below
   closely resembles how the list will look for users later.
   <br />
   To create new fields, use the "Details View" section.
-</div>
+</app-hint-box>
 
 <app-view-title [disableBackButton]="true" [displayInPlace]="true">
   {{ entityConstructor.labelPlural }}

src/app/core/admin/admin-entity-list/admin-entity-list.component.ts

@@ -10,6 +10,7 @@ import { AdminTabTemplateDirective } from "../building-blocks/admin-tabs/admin-t
 import { ViewTitleComponent } from "../../common-components/view-title/view-title.component";
 import { Logging } from "../../logging/logging.service";
 import { AdminListManagerComponent } from "#src/app/core/admin/admin-list-manager/admin-list-manager.component";
+import { HintBoxComponent } from "#src/app/core/common-components/hint-box/hint-box.component";
 
 @Component({
   selector: "app-admin-entity-list",
@@ -19,12 +20,10 @@ import { AdminListManagerComponent } from "#src/app/core/admin/admin-list-manage
     AdminTabTemplateDirective,
     ViewTitleComponent,
     AdminListManagerComponent,
+    HintBoxComponent,
   ],
   templateUrl: "./admin-entity-list.component.html",
-  styleUrls: [
-    "./admin-entity-list.component.scss",
-    "../admin-entity/admin-entity-styles.scss",
-  ],
+  styleUrls: ["./admin-entity-list.component.scss"],
 })
 export class AdminEntityListComponent implements OnChanges {
   @Input() entityConstructor: EntityConstructor;

src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.html

@@ -1,9 +1,9 @@
-<div class="hint-banner" i18n>
+<app-hint-box i18n>
   You can share the link to a "Public Form" with people who do not have an
   account or embed it in your website. People can submit new records through
   this form without logging in. For example, you can let participants
   self-register this way and then review their data later.
-</div>
+</app-hint-box>
 
 <app-view-title [disableBackButton]="true" [displayInPlace]="true" i18n>
   Public Forms

src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.ts

@@ -2,15 +2,13 @@ import { Component, Input } from "@angular/core";
 import { EntityConstructor } from "app/core/entity/model/entity";
 import { ViewTitleComponent } from "../../common-components/view-title/view-title.component";
 import { RelatedEntitiesComponent } from "../../entity-details/related-entities/related-entities.component";
+import { HintBoxComponent } from "#src/app/core/common-components/hint-box/hint-box.component";
 
 @Component({
   selector: "app-admin-entity-public-forms-component",
   templateUrl: "./admin-entity-public-forms-component.html",
-  styleUrls: [
-    "./admin-entity-public-forms-component.scss",
-    "../admin-entity/admin-entity-styles.scss",
-  ],
-  imports: [ViewTitleComponent, RelatedEntitiesComponent],
+  styleUrls: ["./admin-entity-public-forms-component.scss"],
+  imports: [ViewTitleComponent, RelatedEntitiesComponent, HintBoxComponent],
 })
 export class AdminEntityPublicFormsComponent {
   /**

src/app/core/admin/admin-entity/admin-entity-general-settings/admin-entity-general-settings.component.html

@@ -1,7 +1,7 @@
-<div class="hint-banner" i18n>
+<app-hint-box i18n>
   The settings here apply to the entity type overall and take effect everywhere
   the entity is displayed, including lists, forms and other views.
-</div>
+</app-hint-box>
 
 <h2 i18n>General Settings of "{{ entityConstructor.label }}" Records</h2>
 

src/app/core/admin/admin-entity/admin-entity-general-settings/admin-entity-general-settings.component.ts

@@ -1,10 +1,10 @@
 import {
   Component,
   EventEmitter,
+  inject,
   Input,
   OnInit,
   Output,
-  inject,
 } from "@angular/core";
 import { EntityConstructor } from "../../../entity/model/entity";
 import { MatButtonModule } from "@angular/material/button";
@@ -38,14 +38,12 @@ import { DateOnlyDatatype } from "app/core/basic-datatypes/date-only/date-only.d
 import { AdminIconComponent } from "app/admin-icon-input/admin-icon-input.component";
 import { SimpleDropdownValue } from "app/core/common-components/basic-autocomplete/simple-dropdown-value.interface";
 import { ColorInputComponent } from "#src/app/color-input/color-input.component";
+import { HintBoxComponent } from "#src/app/core/common-components/hint-box/hint-box.component";
 
 @Component({
   selector: "app-admin-entity-general-settings",
   templateUrl: "./admin-entity-general-settings.component.html",
-  styleUrls: [
-    "./admin-entity-general-settings.component.scss",
-    "../admin-entity-styles.scss",
-  ],
+  styleUrls: ["./admin-entity-general-settings.component.scss"],
   imports: [
     MatButtonModule,
     MatInputModule,
@@ -64,6 +62,7 @@ import { ColorInputComponent } from "#src/app/color-input/color-input.component"
     FaIconComponent,
     AdminIconComponent,
     ColorInputComponent,
+    HintBoxComponent,
   ],
 })
 export class AdminEntityGeneralSettingsComponent implements OnInit {