hide suggestion section when no suggestions exist

src/View/Modals/searchModal.tsx

@@ -70,24 +70,25 @@ export function SearchModal<T>(
                         </button>
                     </div>
 
-		    <hr></hr>
-
-		    <h3>{coreViewModel.translations.general.searchSuggestionsLabel}</h3>
-
-                    <div
-                        class="flex-column gap"
-                        children:append={[
-                                searchViewModel.suggestions,
-			    (suggestion: string) => SuggestionView(suggestion, searchViewModel, coreViewModel),
-                        ]}
-                    ></div>
-                </main>
-                <button on:click={close}>
-                    {coreViewModel.translations.general.closeButton}
-                    <span class="icon">close</span>
-                </button>
-            </div>
-        </div>
+		    <div 
+			toggle:hidden={searchViewModel.hasNoSuggestions}>
+			<hr></hr>
+			<h3>{coreViewModel.translations.general.searchSuggestionsLabel}</h3>
+			<div
+			    class="flex-column gap"
+			    children:append={[
+				searchViewModel.suggestions,
+				(suggestion: string) => SuggestionView(suggestion, searchViewModel, coreViewModel),
+			    ]}
+			></div>
+		    </div>
+		</main>
+		<button on:click={close}>
+		    {coreViewModel.translations.general.closeButton}
+		    <span class="icon">close</span>
+		</button>
+	    </div>
+	</div>
     );
 }
 

src/ViewModel/Utility/searchViewModel.ts

@@ -15,6 +15,7 @@ export default class SearchViewModel<T> {
         [this.searchInput],
         () => this.searchInput.value == "",
     );
+    hasNoSuggestions: React.State<boolean> = React.createProxyState([this.suggestions], ()=>this.suggestions.value.size == 0);
 
     // methods
     search = (searchTerm: string): void => {