remove recent history when there is a result

Author: xelaint

apps/daffio/src/app/docs/search/components/search-modal/search-modal.component.html

@@ -1,7 +1,10 @@
 <daffio-docs-search-field [inputValue]="formControl"></daffio-docs-search-field>
 
 @let recentQueries = recentQueries$ | async;
-@if (recentQueries?.length > 0) {
+@let results = docsResults$ | async;
+@let loading = loading$ | async;
+
+@if (recentQueries?.length > 0 && !results?.length && !loading) {
 	<div class="daffio-docs-search-history">
 		<div class="daffio-docs-search-history__title">
 			Recent
@@ -11,7 +14,7 @@
 				<li daffioDocsSearchResultItem class="daffio-docs-search-results__item">
 					<a [routerLink]="result.id" (click)="onClick(result.id)">
 						<div class="daffio-docs-search-results__result-wrapper">
-							<fa-icon [icon]="RESULT_ICONS[result.kind]" [fixedWidth]="true"></fa-icon>
+							<fa-icon [icon]="faClockRotateLeft" [fixedWidth]="true"></fa-icon>
 							<div class="daffio-docs-search-results__result-package">
 								<div class="daffio-docs-search-results__result">{{result.title || result.name}}</div>
 									@if ('package' in result) {
@@ -27,8 +30,6 @@
 	</div>
 }
 
-@let results = docsResults$ | async;
-@let loading = loading$ | async;
 @if (results?.length > 0 || loading) {
 	<ul class="daffio-docs-search-results" role="listbox">
 		@for (result of results; track $index) {
@@ -48,17 +49,21 @@
 			</li>
 		}
 	</ul>
-} @else {
+}
+
+@if (formControl.value && !results?.length && !loading) {
 	<div class="daffio-docs-search-results">
-		@if (formControl.value) {
-			<div class="daffio-docs-search-results__no-results">
-				No results found
-			</div>
-		} @else {
-			<div class="daffio-docs-search-results__start-screen">
-				Start typing to see results
-			</div>
-		}
+		<div class="daffio-docs-search-results__no-results">
+			No results found
+		</div>
+	</div>
+}
+
+@if (!formControl.value && !recentQueries?.length && !results?.length && !loading) {
+	<div class="daffio-docs-search-results">
+		<div class="daffio-docs-search-results__start-screen">
+			Start typing to see results
+		</div>
 	</div>
 }
 

apps/daffio/src/app/docs/search/components/search-modal/search-modal.component.ts

@@ -5,7 +5,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   DestroyRef,
-  HostBinding,
   OnInit,
   QueryList,
   ViewChildren,
@@ -52,6 +51,7 @@ import { DaffioDocsSearchFooterComponent } from '../search-footer/search-footer.
   styleUrl: './search-modal.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
+    class: 'daffio-docs-search-modal',
     '(keydown)': 'onKeydown($event)',
   },
   imports: [
@@ -68,8 +68,6 @@ export class DaffioDocsSearchModalComponent implements AfterViewInit, OnInit {
   readonly faClockRotateLeft = faClockRotateLeft;
   readonly RESULT_ICONS = DAFF_DOCS_SEARCH_RESULT_ICONS;
 
-  @HostBinding('class.daffio-docs-search-modal') readonly class = true;
-
   @ViewChildren(DaffioDocsSearchResultItemDirective) items: QueryList<DaffioDocsSearchResultItemDirective>;
 
   recentQueries$: Observable<Array<DaffSearchDocsResult>>;