ui updates

opal-web/src/lib/components/InputBar.svelte

@@ -1,5 +1,8 @@
 <script>
 	import PropertyPills from './PropertyPills.svelte';
+	import FilterPills from './FilterPills.svelte';
+	import { activeFilter } from '$lib/stores/filters.js';
+	import { mergeInputWithFilter } from '$lib/utils/filters.js';
 
 	/**
 	 * @type {(input: string) => Promise<void>}
@@ -21,8 +24,12 @@
 	async function handleSubmit() {
 		const trimmed = value.trim();
 		if (!trimmed || loading) return;
+
+		// Merge user input with active filter, deduplicating tokens
+		const merged = mergeInputWithFilter(trimmed, $activeFilter || '');
+
 		try {
-			await onSubmit(trimmed);
+			await onSubmit(merged);
 			value = '';
 		} catch {
 			// Value preserved for retry
@@ -78,16 +85,36 @@
 			}
 		});
 	}
+
+	/**
+	 * Get the current input value (for PropertyPills smart replace)
+	 * @returns {string}
+	 */
+	export function getInputValue() {
+		return value;
+	}
+
+	/**
+	 * Set the input value (for PropertyPills smart replace)
+	 * @param {string} newValue
+	 */
+	export function setInputValue(newValue) {
+		value = newValue;
+	}
 </script>
 
 <div class="input-bar">
-	<PropertyPills visible={focused} onInsert={insertAtCursor} />
+	<PropertyPills visible={focused} onInsert={insertAtCursor} inputValue={value} onInputChange={(v) => { value = v; }} />
 
 	{#if error}
 		<div class="error">{error}</div>
 	{/if}
 
-	<div class="input-row">
+	<div class="input-row" class:focused>
+		{#if $activeFilter}
+			<FilterPills />
+			<div class="separator"></div>
+		{/if}
 		<input
 			bind:this={inputEl}
 			bind:value
@@ -95,7 +122,7 @@
 			on:focus={handleFocus}
 			on:blur={handleBlur}
 			type="text"
-			placeholder="Add task... (e.g. Buy milk due:tomorrow priority:H)"
+			placeholder={$activeFilter ? "Add task..." : "Add task... (e.g. Buy milk due:tomorrow priority:H)"}
 			disabled={loading}
 			class="input"
 		/>
@@ -121,25 +148,39 @@
 	.input-bar {
 		grid-area: input;
 		padding: var(--spacing-sm) var(--spacing-md);
-		padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
 		background-color: var(--bg-primary);
 		border-top: 1px solid var(--border-color);
 	}
 
 	.input-row {
 		display: flex;
-		gap: var(--spacing-sm);
-		align-items: center;
+		align-items: stretch;
+		border: 1px solid var(--border-color);
+		border-radius: var(--border-radius);
+		background-color: var(--bg-secondary);
+		transition: border-color 0.15s, box-shadow 0.15s;
+	}
+
+	.input-row.focused {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 2px var(--focus-ring);
+	}
+
+	.separator {
+		width: 1px;
+		align-self: stretch;
+		background-color: var(--border-color);
+		flex-shrink: 0;
 	}
 
 	.input {
 		flex: 1;
 		padding: var(--spacing-sm) var(--spacing-md);
-		border: 1px solid var(--border-color);
-		border-radius: var(--border-radius);
+		border: none;
+		border-radius: 0;
 		font-size: var(--font-size-base);
 		font-family: inherit;
-		background-color: var(--bg-secondary);
+		background: transparent;
 		color: var(--text-primary);
 		min-width: 0;
 	}
@@ -150,8 +191,6 @@
 
 	.input:focus {
 		outline: none;
-		border-color: var(--color-primary);
-		box-shadow: 0 0 0 2px var(--focus-ring);
 	}
 
 	.submit-btn {
@@ -163,7 +202,7 @@
 		background-color: var(--color-primary);
 		color: white;
 		border: none;
-		border-radius: var(--border-radius);
+		border-radius: 0 calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0;
 		cursor: pointer;
 		flex-shrink: 0;
 		min-width: 44px;