Some crazy ideas, search one is half baked and metadata-filter.component too.

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"

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();
   }
 

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">

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')}}"