🎨 Palette: Search, Filter, and Header UX/A11y Improvements

[google-labs-jules]

This PR implements a set of micro-UX and accessibility improvements focused on search, filtering, and core navigation.

💡 What:

1. OS-Aware Search Hints: The search bar now detects the user's operating system to display the correct keyboard shortcut (⌘K for Mac, Ctrl+K for others), making the shortcut hint more intuitive.
2. Smooth Filter Bar Transitions: The sticky UnifiedFilterBar now uses framer-motion for smooth slide-up and slide-down animations instead of a static appearance.
3. Prevented Focus Hijacking: Refactored Searchbar to support an optional autoFocus prop. Disabled it in the UnifiedFilterBar to prevent the browser from snapping to the input when the bar appears during a scroll.
4. Header Accessibility: Added focus-visible styles and a descriptive aria-label to the main "Amr Abed" header button.
5. UX Journaling: Established .Jules/palette.md to track architectural UX decisions and learnings.

🎯 Why:

• Native-feeling shortcuts improve power user efficiency.
• Animations provide visual continuity and reduce cognitive load when UI elements change state.
• Focus management is critical for a smooth scrolling experience, especially with fixed/sticky elements.
• ARIA labels and focus rings are fundamental for ensuring the portfolio is accessible to all users.

📸 Verification:

• Screenshot: [verification.png] shows the OS-aware hint and the header focus state.
• Video: [video.webm] demonstrates the smooth filter bar transition and the non-intrusive focus behavior.
• Accessibility: Verified with keyboard navigation (tab order and focus visibility).
• Tests: pnpm lint and pnpm build passed.

---

PR created automatically by Jules for task 15515930660076399428 started by @amrabed

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud