ui updates

opal-web/src/routes/+layout.svelte

@@ -29,11 +29,11 @@
 		height: 100dvh;
 		display: grid;
 		grid-template-columns: 1fr min(var(--content-max-width), 100%) 1fr;
-		grid-template-rows: auto 1fr auto;
+		grid-template-rows: 1fr auto auto;
 		grid-template-areas:
-			". header ."
 			". content ."
-			". input .";
+			". input ."
+			". header .";
 		overflow: hidden;
 		background: linear-gradient(
 			to right,

opal-web/src/routes/+page.svelte

@@ -3,6 +3,8 @@
 	import { goto } from '$app/navigation';
 	import { authStore } from '$lib/stores/auth.js';
 	import { tasksStore } from '$lib/stores/tasks.js';
+	import { activeFilter, clearFilter } from '$lib/stores/filters.js';
+	import { parseFilterString, filterToParams } from '$lib/utils/filters.js';
 	import Header from '$lib/components/Header.svelte';
 	import TaskList from '$lib/components/TaskList.svelte';
 	import InputBar from '$lib/components/InputBar.svelte';
@@ -24,11 +26,61 @@
 			return;
 		}
 
-		loadReport(activeReport);
+		// Load with existing active filter if any
+		if ($activeFilter) {
+			loadWithFilter($activeFilter);
+		} else {
+			loadReport(activeReport);
+		}
 
 		return unsubscribe;
 	});
 
+	// React to filter changes
+	$: if ($activeFilter !== undefined) {
+		handleFilterChange($activeFilter);
+	}
+
+	/** @type {string|null|undefined} */
+	let lastFilter = undefined;
+
+	/**
+	 * @param {string|null} filter
+	 */
+	function handleFilterChange(filter) {
+		// Skip initial (undefined -> initial value)
+		if (lastFilter === undefined) {
+			lastFilter = filter;
+			return;
+		}
+		// Skip if same value
+		if (filter === lastFilter) return;
+		lastFilter = filter;
+
+		if (filter) {
+			loadWithFilter(filter);
+		} else {
+			loadReport(activeReport);
+		}
+	}
+
+	/**
+	 * @param {string} filterStr
+	 */
+	async function loadWithFilter(filterStr) {
+		loading = true;
+		inputError = '';
+		try {
+			const parsed = parseFilterString(filterStr);
+			const params = filterToParams(parsed);
+			await tasksStore.load(params);
+		} catch (error) {
+			console.error('Failed to load filtered tasks:', error);
+		} finally {
+			loading = false;
+		}
+	}
+
 	/**
 	 * @param {string} reportName
 	 */
@@ -49,6 +101,10 @@
 	 */
 	function handleReportChange(reportName) {
 		activeReport = reportName;
+		// Changing report clears any active filter
+		if ($activeFilter) {
+			clearFilter();
+		}
 		loadReport(reportName);
 	}