fix: improve search UX with no-results feedback and hide empty groups

- Add "No tasks match..." message when search returns no results
- Hide empty groups in TaskListView when search filtering
- Persist search term across view re-renders
- Remove placeholder integration tests that weren't testing anything

Author: callumalpass

docs/releases/unreleased.md

@@ -24,6 +24,14 @@ Example:
 
 -->
 
+## Added
+
+- (#1207) Added inline search box to Bases views (Task List, Kanban, Calendar)
+  - Enable via "Enable search box" toggle in view settings
+  - Searches across title, status, priority, tags, contexts, projects, and visible custom properties
+  - Press Escape or click × to clear search
+  - Thanks to @renatomen for the PR
+
 ## Fixed
 
 - (#1165) Fixed Kanban view grouping by list properties (contexts, tags, projects) treating multiple values as a single combined column

src/bases/BasesViewBase.ts

@@ -358,8 +358,12 @@ export abstract class BasesViewBase extends Component {
 	 * Requires enableSearch to be true and will only create the UI once.
 	 */
 	protected setupSearch(container: HTMLElement): void {
-		// Idempotency: if search UI is already created, do nothing
+		// Idempotency: if search UI is already created, restore value and return
 		if (this.searchBox) {
+			// Restore search term if it was cleared during re-render
+			if (this.currentSearchTerm && this.searchBox.getValue() !== this.currentSearchTerm) {
+				this.searchBox.setValue(this.currentSearchTerm);
+			}
 			return;
 		}
 		if (!this.enableSearch) {
@@ -399,6 +403,11 @@ export abstract class BasesViewBase extends Component {
 		);
 		this.searchBox.render();
 
+		// Restore search term if view is being re-initialized with existing search
+		if (this.currentSearchTerm) {
+			this.searchBox.setValue(this.currentSearchTerm);
+		}
+
 		// Register cleanup using Component lifecycle
 		this.register(() => {
 			if (this.searchBox) {
@@ -455,6 +464,35 @@ export abstract class BasesViewBase extends Component {
 		return filtered;
 	}
 
+	/**
+	 * Check if we're currently filtering with no results.
+	 * Returns true if search is active and produced no matches.
+	 */
+	protected isSearchWithNoResults(filteredTasks: TaskInfo[], originalCount: number): boolean {
+		return this.currentSearchTerm.length > 0 && filteredTasks.length === 0 && originalCount > 0;
+	}
+
+	/**
+	 * Render "no results" message for search.
+	 * Call this when search produces no matches.
+	 */
+	protected renderSearchNoResults(container: HTMLElement): void {
+		const noResultsEl = document.createElement("div");
+		noResultsEl.className = "tn-search-no-results";
+
+		const textEl = document.createElement("div");
+		textEl.className = "tn-search-no-results__text";
+		textEl.textContent = `No tasks match "${this.currentSearchTerm}"`;
+
+		const hintEl = document.createElement("div");
+		hintEl.className = "tn-search-no-results__hint";
+		hintEl.textContent = "Try a different search term or clear the search";
+
+		noResultsEl.appendChild(textEl);
+		noResultsEl.appendChild(hintEl);
+		container.appendChild(noResultsEl);
+	}
+
 	// Abstract methods that subclasses must implement
 
 	/**

src/bases/KanbanView.ts

@@ -119,7 +119,12 @@ export class KanbanView extends BasesViewBase {
 			this.boardEl.empty();
 
 			if (filteredTasks.length === 0) {
-				this.renderEmptyState();
+				// Show "no results" if search returned empty but we had tasks
+				if (this.isSearchWithNoResults(filteredTasks, taskNotes.length)) {
+					this.renderSearchNoResults(this.boardEl);
+				} else {
+					this.renderEmptyState();
+				}
 				return;
 			}
 

src/bases/TaskListView.ts

@@ -225,6 +225,15 @@ export class TaskListView extends BasesViewBase {
 		// Apply search filter
 		const filteredTasks = this.applySearchFilter(taskNotes);
 
+		// Show "no results" if search returned empty but we had tasks
+		if (this.isSearchWithNoResults(filteredTasks, taskNotes.length)) {
+			this.clearAllTaskElements();
+			if (this.itemsContainer) {
+				this.renderSearchNoResults(this.itemsContainer);
+			}
+			return;
+		}
+
 		// Note: taskNotes are already sorted by Bases according to sort configuration
 		// No manual sorting needed - Bases provides pre-sorted data
 
@@ -376,6 +385,10 @@ export class TaskListView extends BasesViewBase {
 			const primaryKey = this.dataAdapter.convertGroupKeyToString(group.key);
 			const groupPaths = new Set(group.entries.map((e: any) => e.file.path));
 			const groupTasks = taskNotes.filter((t) => groupPaths.has(t.path));
+
+			// Skip groups with no matching tasks (e.g., after search filtering)
+			if (groupTasks.length === 0) continue;
+
 			const isPrimaryCollapsed = this.collapsedGroups.has(primaryKey);
 
 			// Add primary header
@@ -441,6 +454,15 @@ export class TaskListView extends BasesViewBase {
 		// Apply search filter
 		const filteredTasks = this.applySearchFilter(taskNotes);
 
+		// Show "no results" if search returned empty but we had tasks
+		if (this.isSearchWithNoResults(filteredTasks, taskNotes.length)) {
+			this.clearAllTaskElements();
+			if (this.itemsContainer) {
+				this.renderSearchNoResults(this.itemsContainer);
+			}
+			return;
+		}
+
 		const targetDate = new Date();
 		this.currentTargetDate = targetDate;
 		const cardOptions = this.getCardOptions(targetDate);
@@ -518,6 +540,15 @@ export class TaskListView extends BasesViewBase {
 		// Apply search filter
 		const filteredTasks = this.applySearchFilter(taskNotes);
 
+		// Show "no results" if search returned empty but we had tasks
+		if (this.isSearchWithNoResults(filteredTasks, taskNotes.length)) {
+			this.clearAllTaskElements();
+			if (this.itemsContainer) {
+				this.renderSearchNoResults(this.itemsContainer);
+			}
+			return;
+		}
+
 		const targetDate = new Date();
 		this.currentTargetDate = targetDate;
 		const cardOptions = this.getCardOptions(targetDate);

styles/search-box.css

@@ -95,3 +95,25 @@
 	outline-offset: 2px;
 }
 
+/* No results state */
+.tn-search-no-results {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: var(--size-4-8, 32px) var(--size-4-4, 16px);
+	text-align: center;
+	color: var(--text-muted);
+}
+
+.tn-search-no-results__text {
+	font-size: var(--font-ui-medium, 14px);
+	color: var(--text-normal);
+	margin-bottom: var(--size-4-2, 8px);
+}
+
+.tn-search-no-results__hint {
+	font-size: var(--font-ui-small, 13px);
+	color: var(--text-muted);
+}
+