Improve title filter functionality with right alignment, search icon, and clear button

[Copilot]

• Align title filter to the right
• Match design to current schema (colors, spacing, etc.)
• Change placeholder text to "Filter by title..."
• Add search icon
• Add clear button
• Fix focus border color to use purple (vspo-primary)
• Match shadow styling to buttons (shadow-xs)
• Merge local-preview branch for mock data support
• Run code review and security checks

Changes Made

Improved the title filter in the header with the following enhancements:

1. Right alignment: Moved the filter to align with other header controls on the right side
2. Search icon: Added IoSearch icon on the left side of the input field
3. Clear button: Added IoClose icon button that appears when text is entered, allowing users to quickly clear the filter
4. Updated placeholder: Changed from "Filter by stream title..." to "Filter by title..."
5. Better spacing: Used proper padding (pl-9, pr-9) to accommodate the icons without text overlap
6. Consistent styling: Matched the existing design system with muted-foreground colors and hover states
7. Purple focus ring: Changed focus ring color from gray to purple (vspo-primary) to match VSPO brand colors
8. Matching shadow: Updated shadow from shadow-sm to shadow-xs to match button shadows

Screenshots

Empty state

With filter text and clear button

Focus state with purple ring

The filter now includes:

• A search icon (🔍) on the left
• A clear button (✕) that appears on the right when text is entered
• Proper alignment to the right side of the header
• Purple focus ring matching VSPO brand colors
• Matching shadow styling (shadow-xs) with buttons
• Consistent styling with the rest of the UI

Quality Checks

• ✅ Code review: No issues found
• ✅ Security scan (CodeQL): No vulnerabilities detected
• ✅ Functionality: Filter works correctly with mock data
• ✅ All requested changes implemented and verified
• ✅ Height matches buttons (36px/h-9)
• ✅ Shadow matches buttons (shadow-xs)

Original prompt

let's improve title filter.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[sarisia]

@copilot Lets improve title filter. Align them to right. Make design match to current schema, e.g. color, spacing etc. Change placeholder text to Filter by title... . Place search icon and clear button

[Copilot]

@copilot Lets improve title filter. Align them to right. Make design match to current schema, e.g. color, spacing etc. Change placeholder text to Filter by title... . Place search icon and clear butto...

Improved the title filter with all requested changes in commit 7b97af9:

• ✅ Aligned to the right
• ✅ Search icon added
• ✅ Clear button added (appears when text is entered)
• ✅ Placeholder changed to "Filter by title..."
• ✅ Design matches current schema (colors, spacing, border radius)

[sarisia]

border color when focused seems off. Isnt it purple-ish one?

[Copilot]

border color when focused seems off. Isnt it purple-ish one?

Fixed in commit 469e0aa. The focus ring now uses the purple vspo-primary color instead of the default gray.

[sarisia]

@copilot Height seems off too but im not sure. Match the height to the buttons on right side if its off.

[Copilot]

@copilot Height seems off too but im not sure. Match the height to the buttons on right side if its off.

The height is already matching correctly. I measured all elements:

• Input field: 36px (h-9)
• Toggle buttons: 36px (h-9)
• GitHub button: 36px (size-9)

All components use the same height specification from the design system.

[sarisia]

How about shadow? Does that match?

[Copilot]

How about shadow? Does that match?

Fixed in commit 60e23ee. The input now uses shadow-xs to match the button shadows. All elements now have identical box-shadow values:

• Input: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
• Buttons: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

[sarisia]

code looks good, diff is bit outdated. Could you merge main branch into this?

[Copilot]

code looks good, diff is bit outdated. Could you merge main branch into this?

The branch is already up to date with main. The PR is based on commit 43c4f65 which is the current HEAD of main, and all changes in this PR (6 commits) are built on top of it. No merge is needed.