From b8666fdcbe324ebcde8aaf7fe2d336af18fccd19 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 13 Jul 2024 17:21:51 +0200
Subject: [PATCH 01/12] New dumb `k-search` component

---
 panel/lab/components/search/index.php      |   5 +
 panel/lab/components/search/index.vue      |  60 +++++++
 panel/src/components/Navigation/Search.vue | 200 +++++++++++++++++++++
 panel/src/components/Navigation/index.js   |   2 +
 4 files changed, 267 insertions(+)
 create mode 100644 panel/lab/components/search/index.php
 create mode 100644 panel/lab/components/search/index.vue
 create mode 100644 panel/src/components/Navigation/Search.vue

diff --git a/panel/lab/components/search/index.php b/panel/lab/components/search/index.php
new file mode 100644
index 0000000000..dcf0e18c8c
--- /dev/null
+++ b/panel/lab/components/search/index.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+	'docs' => 'k-search',
+];
diff --git a/panel/lab/components/search/index.vue b/panel/lab/components/search/index.vue
new file mode 100644
index 0000000000..07feb8bdfc
--- /dev/null
+++ b/panel/lab/components/search/index.vue
@@ -0,0 +1,60 @@
+<template>
+	<k-lab-examples>
+		<k-lab-example label="Default">
+			<k-search />
+		</k-lab-example>
+		<k-lab-example label="Types">
+			<k-search :types="types" />
+		</k-lab-example>
+		<k-lab-example label="Default type">
+			<k-search :types="types" default-type="files" />
+		</k-lab-example>
+		<k-lab-example label="No results">
+			<k-search :results="[]" />
+		</k-lab-example>
+		<k-lab-example label="Results">
+			<k-search :results="results" />
+		</k-lab-example>
+		<k-lab-example label="More results">
+			<k-search :results="results" :pagination="{ total: 20 }" />
+		</k-lab-example>
+		<k-lab-example label="Is Loading">
+			<k-search :is-loading="true" :results="results" :types="types" />
+		</k-lab-example>
+	</k-lab-examples>
+</template>
+
+<script>
+export default {
+	computed: {
+		results() {
+			return [
+				{ text: "Result A" },
+				{ text: "Result B" },
+				{ text: "Result C" },
+				{ text: "Result D" }
+			];
+		},
+		types() {
+			return {
+				pages: {
+					id: "pages",
+					icon: "page",
+					label: "Pages"
+				},
+				files: {
+					id: "files",
+					icon: "file",
+					label: "Files"
+				}
+			};
+		}
+	}
+};
+</script>
+
+<style>
+.k-search-bar {
+	background: var(--color-gray-100);
+}
+</style>
diff --git a/panel/src/components/Navigation/Search.vue b/panel/src/components/Navigation/Search.vue
new file mode 100644
index 0000000000..00135b7cd4
--- /dev/null
+++ b/panel/src/components/Navigation/Search.vue
@@ -0,0 +1,200 @@
+<template>
+	<div class="k-search-bar">
+		<div class="k-search-bar-input">
+			<!-- Type select -->
+			<template v-if="typesOptions.length > 1">
+				<k-button
+					:dropdown="true"
+					:icon="currentType.icon"
+					:text="currentType.label"
+					variant="dimmed"
+					class="k-search-bar-types"
+					@click="$refs.types.toggle()"
+				/>
+				<k-dropdown-content ref="types" :options="typesOptions" />
+			</template>
+
+			<!-- Input -->
+			<k-search-input
+				ref="input"
+				:aria-label="$t('search')"
+				:autofocus="true"
+				:value="query"
+				@input="query = $event"
+				@keydown.native.down.prevent="onDown"
+				@keydown.native.up.prevent="onUp"
+				@keydown.native.enter="onEnter"
+			/>
+			<k-button
+				:icon="isLoading ? 'loader' : 'cancel'"
+				:title="$t('close')"
+				class="k-search-bar-close"
+				@click="$emit('close')"
+			/>
+		</div>
+
+		<div v-if="!isLoading && results" class="k-search-bar-results">
+			<!-- Results -->
+			<k-collection
+				v-if="results.length"
+				ref="results"
+				:items="results"
+				@mouseout.native="select(-1)"
+			/>
+
+			<footer class="k-search-bar-footer">
+				<!-- No results -->
+				<p v-if="results.length === 0">
+					{{ $t("search.results.none") }}
+				</p>
+
+				<!-- More results then displayed -->
+				<k-button
+					v-if="results.length < pagination.total"
+					icon="search"
+					variant="dimmed"
+					@click="$emit('more', { type, query })"
+				>
+					{{ $t("search.all", { count: pagination.total }) }}
+				</k-button>
+			</footer>
+		</div>
+	</div>
+</template>
+
+<script>
+import Search from "@/mixins/search.js";
+
+/**
+ * @since 4.4.0
+ */
+export default {
+	mixins: [Search],
+	props: {
+		defaultType: String,
+		isLoading: Boolean,
+		pagination: {
+			type: Object,
+			default: () => ({})
+		},
+		results: Array,
+		types: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	emits: ["close", "more", "navigate", "search"],
+	data() {
+		return {
+			selected: -1,
+			type: this.types[this.defaultType]
+				? this.defaultType
+				: Object.keys(this.types)[0]
+		};
+	},
+	computed: {
+		currentType() {
+			return this.types[this.type];
+		},
+		typesOptions() {
+			return Object.values(this.types).map((search) => ({
+				...search,
+				current: this.type === search.id,
+				click: () => {
+					this.type = search.id;
+					this.focus();
+				}
+			}));
+		}
+	},
+	watch: {
+		type() {
+			this.search();
+		}
+	},
+	methods: {
+		focus() {
+			this.$refs.input?.focus();
+		},
+		onDown() {
+			if (this.selected < this.results.length - 1) {
+				this.select(this.selected + 1);
+			}
+		},
+		onEnter() {
+			this.$emit("navigate", this.results[this.selected] ?? this.results[0]);
+		},
+		onTab() {
+			this.$emit("navigate", this.results[this.selected]);
+		},
+		onUp() {
+			if (this.selected >= 0) {
+				this.select(this.selected - 1);
+			}
+		},
+		async search() {
+			this.$refs.types?.close();
+			this.select?.(-1);
+
+			this.$emit("search", { type: this.type, query: this.query });
+		},
+		select(index) {
+			this.selected = index;
+			const items = this.$refs.results?.$el.querySelectorAll(".k-item") ?? [];
+
+			for (const item of items) {
+				delete item.dataset.selected;
+			}
+
+			if (index >= 0) {
+				items[index].dataset.selected = true;
+			}
+		}
+	}
+};
+</script>
+
+<style>
+.k-search-bar-input {
+	--button-height: var(--input-height);
+	display: flex;
+	align-items: center;
+}
+.k-search-bar-types {
+	flex-shrink: 0;
+	border-inline-end: 1px solid var(--color-border);
+}
+.k-search-bar-input input {
+	flex-grow: 1;
+	padding-inline: 0.75rem;
+	height: var(--input-height);
+	line-height: var(--input-height);
+	border-radius: var(--rounded);
+	font-size: var(--input-font-size);
+}
+.k-search-bar-input input:focus {
+	outline: 0;
+}
+
+.k-search-bar-input .k-search-bar-close {
+	flex-shrink: 0;
+}
+
+.k-search-bar-results {
+	border-top: 1px solid var(--color-border);
+	padding: 1rem;
+}
+.k-search-bar-results .k-item[data-selected="true"] {
+	outline: var(--outline);
+}
+
+.k-search-bar-footer {
+	text-align: center;
+}
+.k-search-bar-footer p {
+	color: var(--color-text-dimmed);
+}
+.k-search-bar-footer .k-button {
+	margin-top: var(--spacing-4);
+}
+</style>
diff --git a/panel/src/components/Navigation/index.js b/panel/src/components/Navigation/index.js
index 4cf6dac7ed..e1cb466aac 100644
--- a/panel/src/components/Navigation/index.js
+++ b/panel/src/components/Navigation/index.js
@@ -9,6 +9,7 @@ import Navigate from "./Navigate.vue";
 import PageTree from "./PageTree.vue";
 import Pagination from "./Pagination.vue";
 import PrevNext from "./PrevNext.vue";
+import Search from "./Search.vue";
 import Tag from "./Tag.vue";
 import Tags from "./Tags.vue";
 import Tree from "./Tree.vue";
@@ -31,6 +32,7 @@ export default {
 		app.component("k-page-tree", PageTree);
 		app.component("k-pagination", Pagination);
 		app.component("k-prev-next", PrevNext);
+		app.component("k-search", Search);
 		app.component("k-tag", Tag);
 		app.component("k-tags", Tags);
 		app.component("k-tree", Tree);

From 8fc2c21e6d698c4af48e4084ab3d1b72e7b47741 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 13 Jul 2024 17:19:33 +0200
Subject: [PATCH 02/12] Clean up `k-dialog-search`

---
 panel/src/components/Dialogs/Elements/Search.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/panel/src/components/Dialogs/Elements/Search.vue b/panel/src/components/Dialogs/Elements/Search.vue
index 6b93668bd1..f55c23b235 100644
--- a/panel/src/components/Dialogs/Elements/Search.vue
+++ b/panel/src/components/Dialogs/Elements/Search.vue
@@ -2,11 +2,10 @@
 	<k-input
 		:autofocus="autofocus"
 		:placeholder="placeholder"
-		:spellcheck="false"
 		:value="value"
 		class="k-dialog-search"
 		icon="search"
-		type="text"
+		type="search"
 		@input="$emit('search', $event)"
 	/>
 </template>
@@ -23,7 +22,6 @@ export default {
 			type: Boolean
 		},
 		placeholder: {
-			default: () => window.panel.$t("search") + " …",
 			type: String
 		},
 		value: {

From 88799dea372ef0a1c7111e76c16f7e58fbd9b478 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 13 Jul 2024 17:19:58 +0200
Subject: [PATCH 03/12] New `panel.searcher` module

---
 panel/src/panel/panel.js  | 23 +++---------
 panel/src/panel/search.js | 74 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+), 19 deletions(-)
 create mode 100644 panel/src/panel/search.js

diff --git a/panel/src/panel/panel.js b/panel/src/panel/panel.js
index 9677af4195..862157d935 100644
--- a/panel/src/panel/panel.js
+++ b/panel/src/panel/panel.js
@@ -9,6 +9,7 @@ import Notification from "./notification.js";
 import Language from "./language.js";
 import Plugins from "./plugins.js";
 import Menu from "./menu.js";
+import Search from "./search.js";
 import System from "./system.js";
 import Translation from "./translation.js";
 import { buildUrl, isUrl } from "@/helpers/url.js";
@@ -72,6 +73,7 @@ export default {
 		this.activation = Activation(this);
 		this.drag = Drag(this);
 		this.events = Events(this);
+		this.searcher = Search(this);
 		this.upload = Upload(this);
 
 		// state objects
@@ -286,7 +288,7 @@ export default {
 
 	/**
 	 * Use one of the installed search types
-	 * to search for content in the panel
+	 * to search for content in the Panel
 	 *
 	 * @param {String} type
 	 * @param {Object} query
@@ -294,24 +296,7 @@ export default {
 	 * @returns {Object} { code, path, referrer, results, timestamp }
 	 */
 	async search(type, query, options) {
-		// open the search dialog
-		if (!query) {
-			// close menu on mobile
-			this.menu.escape();
-
-			return this.dialog.open({
-				component: "k-search-dialog",
-				props: {
-					type: type
-				}
-			});
-		}
-
-		const { $search } = await this.get(`/search/${type}`, {
-			query: { query, ...options }
-		});
-
-		return $search;
+		return this.searcher.query(type, query, options);
 	},
 
 	/**
diff --git a/panel/src/panel/search.js b/panel/src/panel/search.js
new file mode 100644
index 0000000000..11c9b563cb
--- /dev/null
+++ b/panel/src/panel/search.js
@@ -0,0 +1,74 @@
+/**
+ * @since 4.4.0
+ */
+export default (panel) => {
+	return {
+		controller: null,
+		requests: 0,
+
+		/**
+		 * Whether any search requests are ongoing
+		 */
+		get isLoading() {
+			return this.requests > 0;
+		},
+
+		/**
+		 * Opens the search dialog
+		 *
+		 * @param {String} type
+		 */
+		open(type) {
+			// close menu on mobile
+			panel.menu.escape();
+
+			panel.dialog.open({
+				component: "k-search-dialog",
+				props: {
+					type
+				}
+			});
+		},
+
+		/**
+		 * Use one of the installed search types
+		 * to search for content in the Panel
+		 *
+		 * @param {String} type
+		 * @param {Object} query
+		 * @param {Object} options { limit, page }
+		 * @returns {Object} { code, path, referrer, results, timestamp }
+		 */
+		async query(type, query, options) {
+			if (!query) {
+				// open the search dialog
+				return this.open(type);
+			}
+
+			// abort any previous ongoing search requests
+			this.controller?.abort();
+			this.controller = new AbortController();
+
+			this.requests++;
+
+			try {
+				const { $search } = await panel.get(`/search/${type}`, {
+					query: { query, ...options },
+					signal: this.controller.signal
+				});
+				return $search;
+			} catch (error) {
+				// if fails and not because request was aborted by subsequent request,
+				// return empty response
+				if (error.name !== "AbortError") {
+					return {
+						results: [],
+						pagination: {}
+					};
+				}
+			} finally {
+				this.requests--;
+			}
+		}
+	};
+};

From e94ea2c52d6f1b9ed05535a71f5e2fff5498d30c Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 13 Jul 2024 17:20:14 +0200
Subject: [PATCH 04/12] SearchDialog: use `k-search`

---
 panel/src/components/Dialogs/SearchDialog.vue | 206 +++---------------
 1 file changed, 26 insertions(+), 180 deletions(-)

diff --git a/panel/src/components/Dialogs/SearchDialog.vue b/panel/src/components/Dialogs/SearchDialog.vue
index 686f7ae98e..870589cc04 100644
--- a/panel/src/components/Dialogs/SearchDialog.vue
+++ b/panel/src/components/Dialogs/SearchDialog.vue
@@ -1,123 +1,47 @@
 <template>
 	<k-dialog
-		v-bind="$props"
 		:cancel-button="false"
 		:submit-button="false"
+		:visible="true"
 		class="k-search-dialog"
 		role="search"
 		size="medium"
 		@cancel="$emit('cancel')"
 		@submit="submit"
 	>
-		<div class="k-search-dialog-input">
-			<!-- Type select -->
-			<k-button
-				:dropdown="true"
-				:icon="currentType.icon"
-				:text="currentType.label"
-				variant="dimmed"
-				class="k-search-dialog-types"
-				@click="$refs.types.toggle()"
-			/>
-			<k-dropdown-content ref="types" :options="types" />
-
-			<!-- Input -->
-			<k-search-input
-				ref="input"
-				:aria-label="$t('search')"
-				:autofocus="true"
-				:value="query"
-				@input="query = $event"
-				@keydown.native.down.prevent="onDown"
-				@keydown.native.up.prevent="onUp"
-				@keydown.native.enter="onEnter"
-			/>
-			<k-button
-				:icon="isLoading ? 'loader' : 'cancel'"
-				:title="$t('close')"
-				class="k-search-dialog-close"
-				@click="close"
-			/>
-		</div>
-
-		<div v-if="query?.length > 1" class="k-search-dialog-results">
-			<!-- Results -->
-			<k-collection
-				v-if="items.length"
-				ref="items"
-				:items="items"
-				@mouseout.native="select(-1)"
-			/>
-
-			<!-- No results -->
-			<footer class="k-search-dialog-footer">
-				<p v-if="!items.length">
-					{{ $t("search.results.none") }}
-				</p>
-
-				<k-button
-					v-else-if="items.length < pagination.total"
-					icon="search"
-					variant="dimmed"
-					@click="$go('search', { query: { current, query } })"
-				>
-					{{ $t("search.all", { count: pagination.total }) }}
-				</k-button>
-			</footer>
-		</div>
+		<k-search
+			ref="search"
+			:default-type="type ?? $panel.view.search"
+			:is-loading="$panel.searcher.isLoading"
+			:pagination="pagination"
+			:results="results"
+			:types="$panel.searches"
+			@close="close"
+			@more="$go('search', { query: $event })"
+			@navigate="navigate"
+			@search="search"
+		/>
 	</k-dialog>
 </template>
 
 <script>
 import Dialog from "@/mixins/dialog.js";
-import Search from "@/mixins/search.js";
 
 export default {
-	mixins: [Dialog, Search],
+	mixins: [Dialog],
 	props: {
 		type: String
 	},
 	emits: ["cancel"],
 	data() {
 		return {
-			isLoading: false,
-			items: [],
-			pagination: {},
-			selected: -1,
-			current:
-				this.type ??
-				(this.$panel.searches[this.$panel.view.search]
-					? this.$panel.view.search
-					: Object.keys(this.$panel.searches)[0])
+			results: null,
+			pagination: {}
 		};
 	},
-	computed: {
-		currentType() {
-			return this.$panel.searches[this.current] ?? this.types[0];
-		},
-		types() {
-			return Object.values(this.$panel.searches).map((search) => ({
-				...search,
-				current: this.current === search.id,
-				click: () => {
-					this.current = search.id;
-					this.focus();
-				}
-			}));
-		}
-	},
-	watch: {
-		current() {
-			this.search();
-		}
-	},
 	methods: {
-		clear() {
-			this.items = [];
-			this.query = null;
-		},
 		focus() {
-			this.$refs.input?.focus();
+			this.$refs.search?.focus();
 		},
 		navigate(item) {
 			if (item) {
@@ -125,53 +49,19 @@ export default {
 				this.close();
 			}
 		},
-		onDown() {
-			if (this.selected < this.items.length - 1) {
-				this.select(this.selected + 1);
-			}
-		},
-		onEnter() {
-			this.navigate(this.items[this.selected] ?? this.items[0]);
-		},
-		onTab() {
-			this.navigate(this.items[this.selected]);
-		},
-		onUp() {
-			if (this.selected >= 0) {
-				this.select(this.selected - 1);
-			}
-		},
-		async search() {
-			this.isLoading = true;
-			this.$refs.types?.close();
-			this.select?.(-1);
-
-			try {
-				// Skip API call if query empty
-				if (this.query === null || this.query.length < 2) {
-					throw Error("Empty query");
-				}
-
-				const response = await this.$search(this.current, this.query);
-				this.items = response.results;
-				this.pagination = response.pagination;
-			} catch {
-				this.items = [];
+		async search({ type, query }) {
+			// Skip API call if query empty
+			if (query === null || query.length < 2) {
+				this.results = null;
 				this.pagination = {};
-			} finally {
-				this.isLoading = false;
+				return;
 			}
-		},
-		select(index) {
-			this.selected = index;
-			const items = this.$refs.items?.$el.querySelectorAll(".k-item") ?? [];
 
-			for (const item of items) {
-				delete item.dataset.selected;
-			}
+			const response = await this.$panel.search(type, query);
 
-			if (index >= 0) {
-				items[index].dataset.selected = true;
+			if (response) {
+				this.results = response.results;
+				this.pagination = response.pagination;
 			}
 		}
 	}
@@ -182,52 +72,8 @@ export default {
 .k-search-dialog {
 	--dialog-padding: 0;
 	--dialog-rounded: var(--rounded);
-	overflow: visible;
 }
 .k-overlay[open][data-type="dialog"] > .k-portal > .k-search-dialog {
 	margin-top: 0;
 }
-
-.k-search-dialog-input {
-	--button-height: var(--input-height);
-	display: flex;
-	align-items: center;
-}
-.k-search-dialog-types {
-	flex-shrink: 0;
-}
-.k-search-dialog-input input {
-	flex-grow: 1;
-	padding-inline: 0.75rem;
-	height: var(--input-height);
-	border-left: 1px solid var(--color-border);
-	line-height: var(--input-height);
-	border-radius: var(--rounded);
-	font-size: var(--input-font-size);
-}
-.k-search-dialog-input input:focus {
-	outline: 0;
-}
-
-.k-search-dialog-input .k-search-dialog-close {
-	flex-shrink: 0;
-}
-
-.k-search-dialog-results {
-	border-top: 1px solid var(--color-border);
-	padding: 1rem;
-}
-.k-search-dialog-results .k-item[data-selected="true"] {
-	outline: var(--outline);
-}
-
-.k-search-dialog-footer {
-	text-align: center;
-}
-.k-search-dialog-footer p {
-	color: var(--color-text-dimmed);
-}
-.k-search-dialog-footer .k-button {
-	margin-top: var(--spacing-4);
-}
 </style>

From 3596f94243f2a5c26a79d80efbb386474de4ceb7 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 13 Jul 2024 17:20:46 +0200
Subject: [PATCH 05/12] Adapt SearchView to `panel.searcher`

---
 i18n/translations/en.json                 |  1 +
 panel/src/components/Views/SearchView.vue | 67 ++++++++++++++---------
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/i18n/translations/en.json b/i18n/translations/en.json
index 1592770f82..1226e7ac10 100644
--- a/i18n/translations/en.json
+++ b/i18n/translations/en.json
@@ -595,6 +595,7 @@
 
 	"save": "Save",
 	"search": "Search",
+	"searching": "Searching",
 	"search.min": "Enter {min} characters to search",
 	"search.all": "Show all {count} results",
 	"search.results.none": "No results",
diff --git a/panel/src/components/Views/SearchView.vue b/panel/src/components/Views/SearchView.vue
index 1e9a4e215b..d81c2da2f7 100644
--- a/panel/src/components/Views/SearchView.vue
+++ b/panel/src/components/Views/SearchView.vue
@@ -8,11 +8,11 @@
 				slot="buttons"
 				:aria-label="$t('search')"
 				:autofocus="true"
+				:icon="isLoading ? 'loader' : 'search'"
 				:placeholder="$t('search') + ' …'"
 				:spellcheck="false"
 				:value="query"
 				class="k-search-view-input"
-				icon="search"
 				type="text"
 				@input="query = $event"
 			/>
@@ -21,10 +21,10 @@
 
 		<div class="k-search-view-results">
 			<k-collection
-				:items="items"
+				:items="results"
 				:empty="{
-					icon: 'search',
-					text: $t('search.results.none')
+					icon: isLoading ? 'loader' : 'search',
+					text: empty
 				}"
 				:pagination="pagination"
 				@paginate="onPaginate"
@@ -50,9 +50,9 @@ export default {
 	},
 	data() {
 		return {
-			items: [],
 			query: new URLSearchParams(window.location.search).get("query"),
-			pagination: {}
+			pagination: {},
+			results: []
 		};
 	},
 	computed: {
@@ -62,16 +62,30 @@ export default {
 				Object.values(this.$panel.searches)[0]
 			);
 		},
+		empty() {
+			if (this.isLoading) {
+				return this.$t("searching") + "…";
+			}
+
+			if (this.query.length < 2) {
+				return this.$t("search.min", { min: 2 });
+			}
+
+			return this.$t("search.results.none");
+		},
+		isLoading() {
+			return this.$panel.searcher.isLoading;
+		},
 		tabs() {
 			const tabs = [];
 
-			for (const typeId in this.$panel.searches) {
-				const type = this.$panel.searches[typeId];
+			for (const id in this.$panel.searches) {
+				const type = this.$panel.searches[id];
 
 				tabs.push({
 					label: type.label,
-					link: "/search/?type=" + typeId + "&query=" + this.query,
-					name: typeId
+					link: "/search/?type=" + id + "&query=" + this.query,
+					name: id
 				});
 			}
 
@@ -79,6 +93,9 @@ export default {
 		}
 	},
 	watch: {
+		isLoading(state) {
+			this.$panel.isLoading = state;
+		},
 		query: {
 			handler() {
 				// reload results when query changes
@@ -99,8 +116,6 @@ export default {
 			this.search(pagination.page);
 		},
 		async search(page) {
-			this.$panel.isLoading = true;
-
 			if (!page) {
 				page = new URLSearchParams(window.location.search).get("page") ?? 1;
 			}
@@ -113,23 +128,25 @@ export default {
 
 			window.history.pushState("", "", url.toString());
 
-			try {
-				// Skip API call if query empty
-				if (this.query === null || this.query.length < 2) {
-					throw Error("Empty query");
-				}
+			// Skip API call if query empty
+			if (this.query === null || this.query.length < 2) {
+				this.results = [];
+				this.pagination = {};
+				return;
+			}
 
-				const response = await this.$search(this.currentType.id, this.query, {
+			const response = await this.$panel.search(
+				this.currentType.id,
+				this.query,
+				{
 					page,
 					limit: 15
-				});
-				this.items = response.results;
+				}
+			);
+
+			if (response) {
+				this.results = response.results;
 				this.pagination = response.pagination;
-			} catch {
-				this.items = [];
-				this.pagination = {};
-			} finally {
-				this.$panel.isLoading = false;
 			}
 		}
 	}

From 775824ec7ba7a831c186d91ebe30f353b964be08 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 13 Jul 2024 17:27:32 +0200
Subject: [PATCH 06/12] SearchDialog: consistent naming of results

---
 panel/src/components/Dialogs/SearchDialog.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/src/components/Dialogs/SearchDialog.vue b/panel/src/components/Dialogs/SearchDialog.vue
index 870589cc04..67bf40395f 100644
--- a/panel/src/components/Dialogs/SearchDialog.vue
+++ b/panel/src/components/Dialogs/SearchDialog.vue
@@ -43,9 +43,9 @@ export default {
 		focus() {
 			this.$refs.search?.focus();
 		},
-		navigate(item) {
-			if (item) {
-				this.$go(item.link);
+		navigate(result) {
+			if (result) {
+				this.$go(result.link);
 				this.close();
 			}
 		},

From e88ae73e58df19bc801a119d6a029229c0c63c13 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 13 Jul 2024 17:32:18 +0200
Subject: [PATCH 07/12] Panel search: DRY too short query

---
 panel/src/components/Dialogs/SearchDialog.vue |  7 -------
 panel/src/components/Views/SearchView.vue     |  9 +--------
 panel/src/mixins/search.js                    |  2 +-
 panel/src/panel/panel.js                      |  5 +++++
 panel/src/panel/search.js                     | 13 ++++++++-----
 5 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/panel/src/components/Dialogs/SearchDialog.vue b/panel/src/components/Dialogs/SearchDialog.vue
index 67bf40395f..4080a2e287 100644
--- a/panel/src/components/Dialogs/SearchDialog.vue
+++ b/panel/src/components/Dialogs/SearchDialog.vue
@@ -50,13 +50,6 @@ export default {
 			}
 		},
 		async search({ type, query }) {
-			// Skip API call if query empty
-			if (query === null || query.length < 2) {
-				this.results = null;
-				this.pagination = {};
-				return;
-			}
-
 			const response = await this.$panel.search(type, query);
 
 			if (response) {
diff --git a/panel/src/components/Views/SearchView.vue b/panel/src/components/Views/SearchView.vue
index d81c2da2f7..3c19c5fdeb 100644
--- a/panel/src/components/Views/SearchView.vue
+++ b/panel/src/components/Views/SearchView.vue
@@ -128,13 +128,6 @@ export default {
 
 			window.history.pushState("", "", url.toString());
 
-			// Skip API call if query empty
-			if (this.query === null || this.query.length < 2) {
-				this.results = [];
-				this.pagination = {};
-				return;
-			}
-
 			const response = await this.$panel.search(
 				this.currentType.id,
 				this.query,
@@ -145,7 +138,7 @@ export default {
 			);
 
 			if (response) {
-				this.results = response.results;
+				this.results = response.results ?? [];
 				this.pagination = response.pagination;
 			}
 		}
diff --git a/panel/src/mixins/search.js b/panel/src/mixins/search.js
index 1668735e60..b04753df61 100644
--- a/panel/src/mixins/search.js
+++ b/panel/src/mixins/search.js
@@ -18,7 +18,7 @@ export default {
 	},
 	data() {
 		return {
-			query: null
+			query: ""
 		};
 	},
 	watch: {
diff --git a/panel/src/panel/panel.js b/panel/src/panel/panel.js
index 862157d935..fa4499f19e 100644
--- a/panel/src/panel/panel.js
+++ b/panel/src/panel/panel.js
@@ -296,6 +296,11 @@ export default {
 	 * @returns {Object} { code, path, referrer, results, timestamp }
 	 */
 	async search(type, query, options) {
+		// open the search dialog
+		if (query === undefined) {
+			return this.searcher.open(type);
+		}
+
 		return this.searcher.query(type, query, options);
 	},
 
diff --git a/panel/src/panel/search.js b/panel/src/panel/search.js
index 11c9b563cb..cfffc6cc19 100644
--- a/panel/src/panel/search.js
+++ b/panel/src/panel/search.js
@@ -40,15 +40,18 @@ export default (panel) => {
 		 * @returns {Object} { code, path, referrer, results, timestamp }
 		 */
 		async query(type, query, options) {
-			if (!query) {
-				// open the search dialog
-				return this.open(type);
-			}
-
 			// abort any previous ongoing search requests
 			this.controller?.abort();
 			this.controller = new AbortController();
 
+			// skip API call if query empty
+			if (query.length < 2) {
+				return {
+					results: null,
+					pagination: {}
+				};
+			}
+
 			this.requests++;
 
 			try {

From 96adf09db097e2a37c3f0db2d1560499b51e9464 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 13 Jul 2024 17:41:33 +0200
Subject: [PATCH 08/12] Clean up `k-search`

---
 panel/src/components/Navigation/Search.vue | 24 +++++++---------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/panel/src/components/Navigation/Search.vue b/panel/src/components/Navigation/Search.vue
index 00135b7cd4..d17693c7be 100644
--- a/panel/src/components/Navigation/Search.vue
+++ b/panel/src/components/Navigation/Search.vue
@@ -2,16 +2,16 @@
 	<div class="k-search-bar">
 		<div class="k-search-bar-input">
 			<!-- Type select -->
-			<template v-if="typesOptions.length > 1">
+			<template v-if="typesDropdown.length > 1">
 				<k-button
 					:dropdown="true"
-					:icon="currentType.icon"
-					:text="currentType.label"
+					:icon="types[type].icon"
+					:text="types[type].label"
 					variant="dimmed"
 					class="k-search-bar-types"
 					@click="$refs.types.toggle()"
 				/>
-				<k-dropdown-content ref="types" :options="typesOptions" />
+				<k-dropdown-content ref="types" :options="typesDropdown" />
 			</template>
 
 			<!-- Input -->
@@ -93,10 +93,7 @@ export default {
 		};
 	},
 	computed: {
-		currentType() {
-			return this.types[this.type];
-		},
-		typesOptions() {
+		typesDropdown() {
 			return Object.values(this.types).map((search) => ({
 				...search,
 				current: this.type === search.id,
@@ -117,20 +114,13 @@ export default {
 			this.$refs.input?.focus();
 		},
 		onDown() {
-			if (this.selected < this.results.length - 1) {
-				this.select(this.selected + 1);
-			}
+			this.select(Math.min(this.selected + 1, this.results.length - 1));
 		},
 		onEnter() {
 			this.$emit("navigate", this.results[this.selected] ?? this.results[0]);
 		},
-		onTab() {
-			this.$emit("navigate", this.results[this.selected]);
-		},
 		onUp() {
-			if (this.selected >= 0) {
-				this.select(this.selected - 1);
-			}
+			this.select(Math.max(this.selected - 1, -1));
 		},
 		async search() {
 			this.$refs.types?.close();

From 5a909657134c29829e6e4849b0771de0c7c11b2b Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Mon, 22 Jul 2024 12:30:22 +0200
Subject: [PATCH 09/12] Fix regression

---
 panel/src/components/Dialogs/SearchDialog.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/panel/src/components/Dialogs/SearchDialog.vue b/panel/src/components/Dialogs/SearchDialog.vue
index 4080a2e287..4ec55cecdb 100644
--- a/panel/src/components/Dialogs/SearchDialog.vue
+++ b/panel/src/components/Dialogs/SearchDialog.vue
@@ -65,6 +65,7 @@ export default {
 .k-search-dialog {
 	--dialog-padding: 0;
 	--dialog-rounded: var(--rounded);
+	overflow: visible;
 }
 .k-overlay[open][data-type="dialog"] > .k-portal > .k-search-dialog {
 	margin-top: 0;

From 610fc8f520568e685696ce43b56eb9f19f595f94 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Mon, 22 Jul 2024 12:32:10 +0200
Subject: [PATCH 10/12] Search: also display results while loading

---
 panel/src/components/Navigation/Search.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/src/components/Navigation/Search.vue b/panel/src/components/Navigation/Search.vue
index d17693c7be..55ce74861b 100644
--- a/panel/src/components/Navigation/Search.vue
+++ b/panel/src/components/Navigation/Search.vue
@@ -33,7 +33,7 @@
 			/>
 		</div>
 
-		<div v-if="!isLoading && results" class="k-search-bar-results">
+		<div v-if="results" class="k-search-bar-results">
 			<!-- Results -->
 			<k-collection
 				v-if="results.length"

From 4ec6267e83fdd7bdd2e4607db9f9a2c4d12ce17a Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Fri, 2 Aug 2024 14:41:49 +0200
Subject: [PATCH 11/12] Rename to `k-search-bar`

---
 panel/lab/components/search/index.php              |  5 -----
 panel/lab/components/search/search-bar/index.php   |  5 +++++
 .../components/search/{ => search-bar}/index.vue   | 14 +++++++-------
 panel/src/components/Dialogs/SearchDialog.vue      |  2 +-
 .../Navigation/{Search.vue => SearchBar.vue}       |  0
 panel/src/components/Navigation/index.js           |  4 ++--
 6 files changed, 15 insertions(+), 15 deletions(-)
 delete mode 100644 panel/lab/components/search/index.php
 create mode 100644 panel/lab/components/search/search-bar/index.php
 rename panel/lab/components/search/{ => search-bar}/index.vue (73%)
 rename panel/src/components/Navigation/{Search.vue => SearchBar.vue} (100%)

diff --git a/panel/lab/components/search/index.php b/panel/lab/components/search/index.php
deleted file mode 100644
index dcf0e18c8c..0000000000
--- a/panel/lab/components/search/index.php
+++ /dev/null
@@ -1,5 +0,0 @@
-<?php
-
-return [
-	'docs' => 'k-search',
-];
diff --git a/panel/lab/components/search/search-bar/index.php b/panel/lab/components/search/search-bar/index.php
new file mode 100644
index 0000000000..cc6b4accff
--- /dev/null
+++ b/panel/lab/components/search/search-bar/index.php
@@ -0,0 +1,5 @@
+<?php
+
+return [
+	'docs' => 'k-search-bar',
+];
diff --git a/panel/lab/components/search/index.vue b/panel/lab/components/search/search-bar/index.vue
similarity index 73%
rename from panel/lab/components/search/index.vue
rename to panel/lab/components/search/search-bar/index.vue
index 07feb8bdfc..c2dd23aff2 100644
--- a/panel/lab/components/search/index.vue
+++ b/panel/lab/components/search/search-bar/index.vue
@@ -1,25 +1,25 @@
 <template>
 	<k-lab-examples>
 		<k-lab-example label="Default">
-			<k-search />
+			<k-search-bar />
 		</k-lab-example>
 		<k-lab-example label="Types">
-			<k-search :types="types" />
+			<k-search-bar :types="types" />
 		</k-lab-example>
 		<k-lab-example label="Default type">
-			<k-search :types="types" default-type="files" />
+			<k-search-bar :types="types" default-type="files" />
 		</k-lab-example>
 		<k-lab-example label="No results">
-			<k-search :results="[]" />
+			<k-search-bar :results="[]" />
 		</k-lab-example>
 		<k-lab-example label="Results">
-			<k-search :results="results" />
+			<k-search-bar :results="results" />
 		</k-lab-example>
 		<k-lab-example label="More results">
-			<k-search :results="results" :pagination="{ total: 20 }" />
+			<k-search-bar :results="results" :pagination="{ total: 20 }" />
 		</k-lab-example>
 		<k-lab-example label="Is Loading">
-			<k-search :is-loading="true" :results="results" :types="types" />
+			<k-search-bar :is-loading="true" :results="results" :types="types" />
 		</k-lab-example>
 	</k-lab-examples>
 </template>
diff --git a/panel/src/components/Dialogs/SearchDialog.vue b/panel/src/components/Dialogs/SearchDialog.vue
index 4ec55cecdb..1876424684 100644
--- a/panel/src/components/Dialogs/SearchDialog.vue
+++ b/panel/src/components/Dialogs/SearchDialog.vue
@@ -9,7 +9,7 @@
 		@cancel="$emit('cancel')"
 		@submit="submit"
 	>
-		<k-search
+		<k-search-bar
 			ref="search"
 			:default-type="type ?? $panel.view.search"
 			:is-loading="$panel.searcher.isLoading"
diff --git a/panel/src/components/Navigation/Search.vue b/panel/src/components/Navigation/SearchBar.vue
similarity index 100%
rename from panel/src/components/Navigation/Search.vue
rename to panel/src/components/Navigation/SearchBar.vue
diff --git a/panel/src/components/Navigation/index.js b/panel/src/components/Navigation/index.js
index e1cb466aac..f8ceaefbbd 100644
--- a/panel/src/components/Navigation/index.js
+++ b/panel/src/components/Navigation/index.js
@@ -9,7 +9,7 @@ import Navigate from "./Navigate.vue";
 import PageTree from "./PageTree.vue";
 import Pagination from "./Pagination.vue";
 import PrevNext from "./PrevNext.vue";
-import Search from "./Search.vue";
+import SearchBar from "./SearchBar.vue";
 import Tag from "./Tag.vue";
 import Tags from "./Tags.vue";
 import Tree from "./Tree.vue";
@@ -32,7 +32,7 @@ export default {
 		app.component("k-page-tree", PageTree);
 		app.component("k-pagination", Pagination);
 		app.component("k-prev-next", PrevNext);
-		app.component("k-search", Search);
+		app.component("k-search-bar", SearchBar);
 		app.component("k-tag", Tag);
 		app.component("k-tags", Tags);
 		app.component("k-tree", Tree);

From 5fcd5f5175bf3509dbb1c535e8491e5dac441fb1 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 2 Aug 2024 15:52:55 +0200
Subject: [PATCH 12/12] Rename search-bar lab example and fix CSS

---
 panel/lab/components/{search => }/search-bar/index.php | 0
 panel/lab/components/{search => }/search-bar/index.vue | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename panel/lab/components/{search => }/search-bar/index.php (100%)
 rename panel/lab/components/{search => }/search-bar/index.vue (97%)

diff --git a/panel/lab/components/search/search-bar/index.php b/panel/lab/components/search-bar/index.php
similarity index 100%
rename from panel/lab/components/search/search-bar/index.php
rename to panel/lab/components/search-bar/index.php
diff --git a/panel/lab/components/search/search-bar/index.vue b/panel/lab/components/search-bar/index.vue
similarity index 97%
rename from panel/lab/components/search/search-bar/index.vue
rename to panel/lab/components/search-bar/index.vue
index c2dd23aff2..6866e7e642 100644
--- a/panel/lab/components/search/search-bar/index.vue
+++ b/panel/lab/components/search-bar/index.vue
@@ -54,7 +54,7 @@ export default {
 </script>
 
 <style>
-.k-search-bar {
+.k-lab-example .k-search-bar {
 	background: var(--color-gray-100);
 }
 </style>