hide recent results when there aren't any

Author: xelaint

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

@@ -1,21 +1,26 @@
 <daffio-docs-search-field></daffio-docs-search-field>
-<div class="daffio-docs-search-history"> <!-- remove search history once user starts typing and display the search results instead -->
-	<div class="daffio-docs-search-history__title">
-		Recent
+
+@let recentQueries = recentQueries$ | async;
+@if (recentQueries?.length > 0) {
+	<div class="daffio-docs-search-history">
+		<div class="daffio-docs-search-history__title">
+			Recent
+		</div>
+		<ul class="daffio-docs-search-history__list" role="listbox">
+			@for (recent of recentQueries; track $index) {
+				<li daffioDocsSearchResultItem class="daffio-docs-search-results__item">
+					<a href="/">
+						<div class="daffio-docs-search-results__icon-and-result">
+							<fa-icon [icon]="faClockRotateLeft" [fixedWidth]="true"></fa-icon>
+							<span class="daffio-docs-search-results__result">{{recent}}</span>
+						</div>
+					</a>
+				</li>
+			}
+		</ul>
 	</div>
-	<ul class="daffio-docs-search-history__list" role="listbox">
-		@for (recent of recentQueries$ | async; track $index) {
-			<li daffioDocsSearchResultItem class="daffio-docs-search-results__item">
-				<a href="/">
-					<div class="daffio-docs-search-results__icon-and-result">
-						<fa-icon [icon]="faClockRotateLeft" [fixedWidth]="true"></fa-icon>
-						<span class="daffio-docs-search-results__result">{{recent}}</span>
-					</div>
-				</a>
-			</li>
-		}
-	</ul>
-</div>
+}
+
 @let results = docsResults$ | async;
 @if (results?.length > 0) {
 	<ul class="daffio-docs-search-results" role="listbox">