From e705aadaac9e607922380744c804ca2e6d704e9f Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Sat, 28 Oct 2023 17:08:19 -0500
Subject: [PATCH] Some crazy ideas, search one is half baked and
 metadata-filter.component too.

---
 .../metadata-filter.component.html            |  2 +-
 .../metadata-filter.component.ts              | 32 ++++++++++++++++++-
 .../grouped-typeahead.component.html          | 11 +++++++
 .../side-nav-companion-bar.component.html     |  2 +-
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.html b/UI/Web/src/app/metadata-filter/metadata-filter.component.html
index fc314f8db..3361064bb 100644
--- a/UI/Web/src/app/metadata-filter/metadata-filter.component.html
+++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.html
@@ -24,7 +24,7 @@
   </ng-container>
 
   <ng-template #filterSection>
-    <div class="filter-section mx-auto pb-3" *ngIf="fullyLoaded && filterV2">
+    <div class="filter-section mx-auto pb-3 slide-down" *ngIf="fullyLoaded && filterV2" [@slideFromTop]="isOpen">
       <div class="row justify-content-center g-0">
         <app-metadata-builder [filter]="filterV2"
                               [availableFilterFields]="allFilterFields"
diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
index c5107e4f2..7d0bb4e61 100644
--- a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
+++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
@@ -38,6 +38,9 @@ import {
   Select2UpdateValue
 } from "ng-select2-component";
 import {SmartFilter} from "../_models/metadata/v2/smart-filter";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+const ANIMATION_SPEED = 200;
 
 @Component({
     selector: 'app-metadata-filter',
@@ -46,7 +49,29 @@ import {SmartFilter} from "../_models/metadata/v2/smart-filter";
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
   imports: [NgIf, NgbCollapse, NgTemplateOutlet, DrawerComponent, NgbTooltip, TypeaheadComponent,
-    ReactiveFormsModule, FormsModule, NgbRating, AsyncPipe, TranslocoModule, SortFieldPipe, MetadataBuilderComponent, NgForOf, Select2Module, NgClass]
+    ReactiveFormsModule, FormsModule, NgbRating, AsyncPipe, TranslocoModule, SortFieldPipe, MetadataBuilderComponent, NgForOf, Select2Module, NgClass],
+  animations: [
+    trigger('slideFromTop', [
+      state('in', style({ transform: 'translateY(0)' })),
+      transition('void => *', [
+        style({ transform: 'translateY(-100%)' }),
+        animate(ANIMATION_SPEED)
+      ]),
+      transition('* => void', [
+        animate(ANIMATION_SPEED, style({ transform: 'translateY(-100%)' })),
+      ])
+    ]),
+    trigger('slideFromBottom', [
+      state('in', style({ transform: 'translateY(0)' })),
+      transition('void => *', [
+        style({ transform: 'translateY(100%)' }),
+        animate(ANIMATION_SPEED)
+      ]),
+      transition('* => void', [
+        animate(ANIMATION_SPEED, style({ transform: 'translateY(100%)' })),
+      ])
+    ])
+  ],
 })
 export class MetadataFilterComponent implements OnInit {
 
@@ -89,6 +114,8 @@ export class MetadataFilterComponent implements OnInit {
 
   smartFilters!: Array<Select2Option>;
 
+  isOpen = false;
+
   private readonly cdRef = inject(ChangeDetectorRef);
   private readonly toastr = inject(ToastrService);
 
@@ -114,10 +141,13 @@ export class MetadataFilterComponent implements OnInit {
       this.filterOpen.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(openState => {
         this.filteringCollapsed = !openState;
         this.toggleService.set(!this.filteringCollapsed);
+        this.isOpen = openState;
         this.cdRef.markForCheck();
       });
     }
 
+
+
     this.loadFromPresetsAndSetup();
   }
 
diff --git a/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.html b/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.html
index 8a7847511..ceceab2b3 100644
--- a/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.html
+++ b/UI/Web/src/app/nav/_components/grouped-typeahead/grouped-typeahead.component.html
@@ -15,6 +15,17 @@
     </div>
     <div class="dropdown" *ngIf="hasFocus">
       <ul class="list-group" role="listbox" id="dropdown">
+
+        <ng-container *ngIf="groupedData.series.length === 0 && !hasData">
+          <li class="list-group-item section-header"><h6>Stumped on what to Type?</h6></li>
+          <ul class="list-group results" role="group">
+            <li class="list-group-item" style="font-size: 14px">
+              <i>Try batman, 2014, Ecchi</i> <!-- Or maybe it should be Search by x, y, z -->
+            </li>
+          </ul>
+        </ng-container>
+
+
         <ng-container *ngIf="seriesTemplate !== undefined && groupedData.series.length > 0">
           <li class="list-group-item section-header"><h5 id="series-group">Series</h5></li>
           <ul class="list-group results" role="group" aria-describedby="series-group">
diff --git a/UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.html b/UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.html
index c58712b93..0203806dc 100644
--- a/UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.html
+++ b/UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.html
@@ -12,7 +12,7 @@
         <i class="fa-solid fa-sliders" aria-hidden="true"></i>
         <span class="visually-hidden">{{t('page-settings-title')}}</span>
       </button>
-      <button *ngIf="hasFilter" class="btn btn-{{filterActive ? 'primary' : 'secondary'}} btn-small" (click)="toggleService.toggle()"
+      <button *ngIf="hasFilter" class="btn btn-{{filterActive ? 'primary' : 'info'}} btn-small" (click)="toggleService.toggle()"
               [attr.aria-expanded]="filterOpen" placement="left"
               id="filter-btn--komf"
               ngbTooltip="{{filterOpen ? t('open-filter-and-sort') : t('close-filter-and-sort')}}"