Vorschläge

listify-client/src/app/lists/list-detail/list-detail.component.html

@@ -214,6 +214,75 @@
               Hinzufügen
             </button>
           </form>
+
+          @if (canEditItems()) {
+            <section class="suggestions-panel" aria-label="Smart Suggestions">
+              <div class="suggestions-header">
+                <div>
+                  <h3>Smart Suggestions</h3>
+                  <p>Passende Items basierend auf Name, Beschreibung und Inhalt.</p>
+                </div>
+
+                <button
+                  mat-stroked-button
+                  type="button"
+                  [disabled]="loadingSuggestions()"
+                  (click)="loadSuggestions()"
+                >
+                  @if (loadingSuggestions()) {
+                    <mat-progress-spinner mode="indeterminate" diameter="18" />
+                  } @else {
+                    <mat-icon aria-hidden="true">auto_awesome</mat-icon>
+                  }
+                  Vorschlaege
+                </button>
+              </div>
+
+              @if (itemSuggestions().length > 0) {
+                <ul class="suggestion-list">
+                  @for (suggestion of itemSuggestions(); track suggestion.title) {
+                    <li>
+                      <div>
+                        <strong>{{ suggestion.title }}</strong>
+                        @if (suggestion.notes || suggestion.quantity || !suggestion.required) {
+                          <span>
+                            @if (suggestion.quantity) {
+                              Menge: {{ suggestion.quantity }}
+                            }
+                            @if (suggestion.notes) {
+                              {{ suggestion.quantity ? '- ' : '' }}{{ suggestion.notes }}
+                            }
+                            @if (!suggestion.required) {
+                              {{ suggestion.quantity || suggestion.notes ? '- ' : '' }}Optional
+                            }
+                          </span>
+                        }
+                      </div>
+
+                      <button
+                        mat-icon-button
+                        type="button"
+                        [attr.aria-label]="suggestion.title + ' hinzufuegen'"
+                        [disabled]="addingSuggestionTitle() === suggestion.title"
+                        (click)="addSuggestion(suggestion)"
+                      >
+                        @if (addingSuggestionTitle() === suggestion.title) {
+                          <mat-progress-spinner mode="indeterminate" diameter="18" />
+                        } @else {
+                          <mat-icon aria-hidden="true">add</mat-icon>
+                        }
+                      </button>
+                    </li>
+                  }
+                </ul>
+              } @else if (suggestionsLoaded()) {
+                <div class="inline-empty">
+                  <mat-icon aria-hidden="true">tips_and_updates</mat-icon>
+                  <span>Keine neuen Vorschlaege gefunden.</span>
+                </div>
+              }
+            </section>
+          }
         }
 
         @if (!canEditItems()) {
@@ -223,7 +292,7 @@
           </div>
         } @else if (list()?.items?.length) {
           <ul class="check-items">
-            @for (item of list()!.items; track item.id) {
+            @for (item of visibleItems(list()!); track item.id) {
               <li [class.checked]="item.checked">
                 <mat-checkbox
                   [checked]="item.checked"