Merge pull request #1207 from renatomen/feat/bases-views-inline-search

feat: Add in-view (instant) search box to Bases views

Author: callumalpass

build-css.mjs

@@ -13,6 +13,7 @@ const CSS_FILES = [
     'styles/note-card-bem.css',      // NoteCard component with proper BEM scoping
     'styles/filter-bar-bem.css',     // FilterBar component with proper BEM scoping
     'styles/filter-heading.css',     // FilterHeading component with proper BEM scoping
+    'styles/search-box.css',         // SearchBox component with proper BEM scoping
     'styles/modal-bem.css',          // Modal components with proper BEM scoping
     'styles/task-modal.css',         // Task modal components (Google Keep/Todoist style)
     'styles/reminder-modal.css',     // Reminder modal component with proper BEM scoping

docs/assets/Base View Search Box.gif

@@ -5,6 +5,8 @@ import { PropertyMappingService } from "./PropertyMappingService";
 import { TaskInfo, EVENT_TASK_UPDATED } from "../types";
 import { convertInternalToUserProperties } from "../utils/propertyMapping";
 import { DEFAULT_INTERNAL_VISIBLE_PROPERTIES } from "../settings/defaults";
+import { SearchBox } from "./components/SearchBox";
+import { TaskSearchFilter } from "./TaskSearchFilter";
 
 /**
  * Abstract base class for all TaskNotes Bases views.
@@ -25,6 +27,12 @@ export abstract class BasesViewBase extends Component {
 	protected taskUpdateListener: any = null;
 	protected updateDebounceTimer: number | null = null;
 
+	// Search functionality (opt-in via enableSearch flag)
+	protected enableSearch = false;
+	protected searchBox: SearchBox | null = null;
+	protected searchFilter: TaskSearchFilter | null = null;
+	protected currentSearchTerm = "";
+
 	constructor(controller: any, containerEl: HTMLElement, plugin: TaskNotesPlugin) {
 		// Call Component constructor
 		super();
@@ -344,6 +352,109 @@ export abstract class BasesViewBase extends Component {
 		return visibleProperties;
 	}
 
+	/**
+	 * Initialize search functionality for this view.
+	 * Call this from render() in subclasses that want search.
+	 * 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
+		if (this.searchBox) {
+			return;
+		}
+		if (!this.enableSearch) {
+			return;
+		}
+
+		// Create search container
+		const searchContainer = document.createElement("div");
+		searchContainer.className = "tn-search-container";
+
+		// Insert search container at the top of the container so it appears above
+		// the main items/content (e.g., the task list). This keeps the search box
+		// visible while the list itself can scroll independently.
+		if (container.firstChild) {
+			container.insertBefore(searchContainer, container.firstChild);
+		} else {
+			container.appendChild(searchContainer);
+		}
+
+		// Initialize search filter with visible properties (if available)
+		// Config might not be available yet during initial setup
+		let visibleProperties: string[] = [];
+		try {
+			if (this.config) {
+				visibleProperties = this.getVisibleProperties();
+			}
+		} catch (e) {
+			console.debug(`[${this.type}] Could not get visible properties during search setup:`, e);
+		}
+		this.searchFilter = new TaskSearchFilter(visibleProperties);
+
+		// Initialize search box
+		this.searchBox = new SearchBox(
+			searchContainer,
+			(term) => this.handleSearch(term),
+			300 // 300ms debounce
+		);
+		this.searchBox.render();
+
+		// Register cleanup using Component lifecycle
+		this.register(() => {
+			if (this.searchBox) {
+				this.searchBox.destroy();
+				this.searchBox = null;
+			}
+			this.searchFilter = null;
+			this.currentSearchTerm = "";
+		});
+	}
+
+	/**
+	 * Handle search term changes.
+	 * Subclasses can override for custom behavior.
+	 * Includes performance monitoring for search operations.
+	 */
+	protected handleSearch(term: string): void {
+		const startTime = performance.now();
+		this.currentSearchTerm = term;
+
+		// Re-render with filtered tasks
+		this.render();
+
+		const filterTime = performance.now() - startTime;
+
+		// Log slow searches for performance monitoring
+		if (filterTime > 200) {
+			console.warn(
+				`[${this.type}] Slow search: ${filterTime.toFixed(2)}ms for search term "${term}"`
+			);
+		}
+	}
+
+	/**
+	 * Apply search filter to tasks.
+	 * Returns filtered tasks or original if no search term.
+	 */
+	protected applySearchFilter(tasks: TaskInfo[]): TaskInfo[] {
+		if (!this.searchFilter || !this.currentSearchTerm) {
+			return tasks;
+		}
+
+		const startTime = performance.now();
+		const filtered = this.searchFilter.filterTasks(tasks, this.currentSearchTerm);
+		const filterTime = performance.now() - startTime;
+
+		// Log filter performance for monitoring
+		if (filterTime > 100) {
+			console.warn(
+				`[${this.type}] Filter operation took ${filterTime.toFixed(2)}ms for ${tasks.length} tasks`
+			);
+		}
+
+		return filtered;
+	}
+
 	// Abstract methods that subclasses must implement
 
 	/**

src/bases/BasesViewBase.ts

@@ -352,6 +352,11 @@ export class CalendarView extends BasesViewBase {
 					this.microsoftCalendarToggles.set(cal.id, this.config.get(key) ?? true);
 				}
 			}
+
+			// Read enableSearch toggle (default: false for backward compatibility)
+			const enableSearchValue = this.config.get('enableSearch');
+			this.enableSearch = (enableSearchValue as boolean) ?? false;
+
 			// Mark config as successfully loaded
 			this.configLoaded = true;
 
@@ -373,11 +378,19 @@ export class CalendarView extends BasesViewBase {
 			this.readViewOptions();
 		}
 
+		// Now that config is loaded, setup search (idempotent: will only create once)
+		if (this.rootElement) {
+			this.setupSearch(this.rootElement);
+		}
+
 		try {
 			// Extract tasks from Bases
 			const dataItems = this.dataAdapter.extractDataItems();
 			const taskNotes = await identifyTaskNotesFromBasesData(dataItems, this.plugin);
-			this.currentTasks = taskNotes;
+
+			// Apply search filter
+			const filteredTasks = this.applySearchFilter(taskNotes);
+			this.currentTasks = filteredTasks;
 
 			// Build Bases entry mapping for task enrichment
 			this.basesEntryByPath.clear();

src/bases/CalendarView.ts

@@ -75,6 +75,10 @@ export class KanbanView extends BasesViewBase {
 			const columnOrderStr = (this.config.get('columnOrder') as string) || '{}';
 			this.columnOrders = JSON.parse(columnOrderStr);
 
+			// Read enableSearch toggle (default: false for backward compatibility)
+			const enableSearchValue = this.config.get('enableSearch');
+			this.enableSearch = (enableSearchValue as boolean) ?? false;
+
 			// Mark config as successfully loaded
 			this.configLoaded = true;
 		} catch (e) {
@@ -92,15 +96,23 @@ export class KanbanView extends BasesViewBase {
 			this.readViewOptions();
 		}
 
+		// Now that config is loaded, setup search (idempotent: will only create once)
+		if (this.rootElement) {
+			this.setupSearch(this.rootElement);
+		}
+
 		try {
 			const dataItems = this.dataAdapter.extractDataItems();
 			const taskNotes = await identifyTaskNotesFromBasesData(dataItems, this.plugin);
 
+			// Apply search filter
+			const filteredTasks = this.applySearchFilter(taskNotes);
+
 			// Clear board and cleanup scrollers
 			this.destroyColumnScrollers();
 			this.boardEl.empty();
 
-			if (taskNotes.length === 0) {
+			if (filteredTasks.length === 0) {
 				this.renderEmptyState();
 				return;
 			}
@@ -118,11 +130,11 @@ export class KanbanView extends BasesViewBase {
 			}
 
 			// Group tasks
-			const groups = this.groupTasks(taskNotes, groupByPropertyId, pathToProps);
+			const groups = this.groupTasks(filteredTasks, groupByPropertyId, pathToProps);
 
 			// Render swimlanes if configured
 			if (this.swimLanePropertyId) {
-				await this.renderWithSwimLanes(groups, taskNotes, pathToProps, groupByPropertyId);
+				await this.renderWithSwimLanes(groups, filteredTasks, pathToProps, groupByPropertyId);
 			} else {
 				await this.renderFlat(groups);
 			}

src/bases/KanbanView.ts

@@ -17,6 +17,7 @@ import { parseDateToUTC } from "../utils/dateUtils";
 
 export class TaskListView extends BasesViewBase {
 	type = "tasknoteTaskList";
+
 	private itemsContainer: HTMLElement | null = null;
 	private currentTaskElements = new Map<string, HTMLElement>();
 	private lastRenderWasGrouped = false;
@@ -32,6 +33,7 @@ export class TaskListView extends BasesViewBase {
 	private collapsedSubGroups = new Set<string>(); // Track collapsed sub-group keys
 	private subGroupPropertyId: string | null = null; // Property ID for sub-grouping
 	private configLoaded = false; // Track if we've successfully loaded config
+
 	/**
 	 * Threshold for enabling virtual scrolling in task list view.
 	 * Virtual scrolling activates when total items (tasks + group headers) >= 100.
@@ -64,11 +66,15 @@ export class TaskListView extends BasesViewBase {
 	private readViewOptions(): void {
 		// Guard: config may not be set yet if called too early
 		if (!this.config || typeof this.config.get !== 'function') {
+			console.debug('[TaskListView] Config not available yet in readViewOptions');
 			return;
 		}
 
 		try {
 			this.subGroupPropertyId = this.config.getAsPropertyId('subGroup');
+			// Read enableSearch toggle (default: false for backward compatibility)
+			const enableSearchValue = this.config.get('enableSearch');
+			this.enableSearch = (enableSearchValue as boolean) ?? false;
 			// Mark config as successfully loaded
 			this.configLoaded = true;
 		} catch (e) {
@@ -105,6 +111,11 @@ export class TaskListView extends BasesViewBase {
 			this.readViewOptions();
 		}
 
+		// Now that config is loaded, setup search (idempotent: will only create once)
+		if (this.rootElement) {
+			this.setupSearch(this.rootElement);
+		}
+
 		try {
 			// Skip rendering if we have no data yet (prevents flickering during data updates)
 			if (!this.data?.data) {
@@ -211,6 +222,9 @@ export class TaskListView extends BasesViewBase {
 	private async renderFlat(taskNotes: TaskInfo[]): Promise<void> {
 		const visibleProperties = this.getVisibleProperties();
 
+		// Apply search filter
+		const filteredTasks = this.applySearchFilter(taskNotes);
+
 		// Note: taskNotes are already sorted by Bases according to sort configuration
 		// No manual sorting needed - Bases provides pre-sorted data
 
@@ -219,8 +233,8 @@ export class TaskListView extends BasesViewBase {
 
 		const cardOptions = this.getCardOptions(targetDate);
 
-		// Decide whether to use virtual scrolling
-		const shouldUseVirtualScrolling = taskNotes.length >= this.VIRTUAL_SCROLL_THRESHOLD;
+		// Decide whether to use virtual scrolling based on filtered task count
+		const shouldUseVirtualScrolling = filteredTasks.length >= this.VIRTUAL_SCROLL_THRESHOLD;
 
 		if (shouldUseVirtualScrolling && !this.useVirtualScrolling) {
 			// Switch to virtual scrolling
@@ -233,9 +247,9 @@ export class TaskListView extends BasesViewBase {
 		}
 
 		if (this.useVirtualScrolling) {
-			await this.renderFlatVirtual(taskNotes, visibleProperties, cardOptions);
+			await this.renderFlatVirtual(filteredTasks, visibleProperties, cardOptions);
 		} else {
-			await this.renderFlatNormal(taskNotes, visibleProperties, cardOptions);
+			await this.renderFlatNormal(filteredTasks, visibleProperties, cardOptions);
 		}
 	}
 
@@ -423,13 +437,17 @@ export class TaskListView extends BasesViewBase {
 	 */
 	private async renderGroupedBySubProperty(taskNotes: TaskInfo[]): Promise<void> {
 		const visibleProperties = this.getVisibleProperties();
+
+		// Apply search filter
+		const filteredTasks = this.applySearchFilter(taskNotes);
+
 		const targetDate = new Date();
 		this.currentTargetDate = targetDate;
 		const cardOptions = this.getCardOptions(targetDate);
 
 		// Group tasks by sub-property
 		const pathToProps = this.buildPathToPropsMap();
-		const groupedTasks = this.groupTasksBySubProperty(taskNotes, this.subGroupPropertyId!, pathToProps);
+		const groupedTasks = this.groupTasksBySubProperty(filteredTasks, this.subGroupPropertyId!, pathToProps);
 
 		// Build flat items array (treat sub-groups as primary groups)
 		type RenderItem =
@@ -497,12 +515,15 @@ export class TaskListView extends BasesViewBase {
 		const visibleProperties = this.getVisibleProperties();
 		const groups = this.dataAdapter.getGroupedData();
 
+		// Apply search filter
+		const filteredTasks = this.applySearchFilter(taskNotes);
+
 		const targetDate = new Date();
 		this.currentTargetDate = targetDate;
 		const cardOptions = this.getCardOptions(targetDate);
 
 		// Build flattened list of items using shared method
-		const items = this.buildGroupedRenderItems(groups, taskNotes);
+		const items = this.buildGroupedRenderItems(groups, filteredTasks);
 
 		// Use virtual scrolling if we have many items
 		const shouldUseVirtualScrolling = items.length >= this.VIRTUAL_SCROLL_THRESHOLD;
@@ -718,10 +739,11 @@ export class TaskListView extends BasesViewBase {
 	 * Override from Component base class.
 	 */
 	onunload(): void {
-		// Component.register() calls will be automatically cleaned up
+		// Component.register() calls will be automatically cleaned up (including search cleanup)
 		// We just need to clean up view-specific state
 		this.unregisterContainerListeners();
 		this.destroyVirtualScroller();
+
 		this.currentTaskElements.clear();
 		this.itemsContainer = null;
 		this.lastRenderWasGrouped = false;