Improved the code for handling policies.

src/app/policies/policy-dropdown/policy-dropdown.component.html

@@ -7,8 +7,11 @@
          [formControl]="policyControl"
          [matAutocomplete]="auto" />
   <mat-autocomplete #auto="matAutocomplete">
-    @for (option of filteredPolicies | async; track option) {
-    <mat-option [value]="option">{{option}}</mat-option>
+    @for (option of filteredPolicies | async; track option.path) {
+    <mat-option [value]="option.path">
+      <p class="path">{{option.path}}</p>
+      <p class="description muted">{{option.description}}</p>
+    </mat-option>
     }
   </mat-autocomplete>
   @if (policyControl.invalid && (policyControl.dirty || policyControl.touched)) {

src/app/policies/policy-dropdown/policy-dropdown.component.scss

@@ -0,0 +1,12 @@
+p {
+  margin: 0;
+  padding: 0;
+}
+
+.description {
+  font-size: smaller;
+}
+
+.muted {
+  color: #999999
+}

src/app/policies/policy-dropdown/policy-dropdown.component.ts

@@ -4,9 +4,14 @@ import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angu
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
-import { map, Observable, startWith } from 'rxjs';
+import { EMPTY, map, Observable, startWith } from 'rxjs';
 
-const Policies = [
+interface PolicyData {
+  path: string;
+  description: string;
+}
+
+const Policies: PolicyData[] = [
   { path: "tts", description: "Anything to do with TTS" },
   { path: "tts.chat", description: "Anything to do with chat" },
   { path: "tts.chat.bits.read", description: "To read chat messages with bits via TTS" },
@@ -43,14 +48,7 @@ const Policies = [
 export class PolicyDropdownComponent {
   @Input() policy: string | null = '';
   @Input({ alias: 'control' }) policyControl = new FormControl('', [Validators.required]);
-  filteredPolicies: Observable<string[]>;
-
-  constructor() {
-    this.filteredPolicies = this.policyControl.valueChanges.pipe(
-      startWith(''),
-      map(value => this._filter(value || '')),
-    );
-  }
+  filteredPolicies: Observable<PolicyData[]> = EMPTY;
 
   ngOnInit() {
     this.policyControl.setValue(this.policy);
@@ -60,13 +58,12 @@ export class PolicyDropdownComponent {
     );
   }
 
-  private _filter(value: string): string[] {
+  private _filter(value: string): PolicyData[] {
     const filterValue = value.toLowerCase();
-    const names = Policies.map(p => p.path);
-    if (names.includes(filterValue)) {
-      return names;
+    if (Policies.map(p => p.path).includes(filterValue)) {
+      return Policies;
     }
 
-    return names.filter(option => option.toLowerCase().includes(filterValue));
+    return Policies.filter(option => option.path.toLowerCase().includes(filterValue));
   }
 }