feat(ui): add clear button to search input

[mkk2026]

Added a clear (X) button to the search input in the dashboard. This improves UX by allowing users to quickly reset their search query. The button is accessible (aria-label, keyboard focus) and only appears when there is text in the input.

---

PR created automatically by Jules for task 10200799507076815915 started by @corebrimtech

Summary by CodeRabbit

• New Features
  • Enhanced search input with a clear button: When you type a search query, an X icon now appears on the right side of the input field. Click it to instantly clear your search and start fresh. The button includes full accessibility support for screen readers.

[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.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
security-news-scraper	Ready	Preview, Comment	Feb 15, 2026 0:16am

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds clearable search input functionality with a visual X icon button that appears when search text is present. Includes documentation updates, UI modifications to src/app/page.tsx, and a new Playwright test script to verify the feature.

Changes

Cohort / File(s)	Summary
Documentation .Jules/palette.md	Adds new section documenting the clearable search inputs feature with learning details and implementation description.
Feature Implementation src/app/page.tsx	Imports X icon from lucide-react and adds conditional clear button in search input area. Button appears when searchQuery is non-empty, clears input on click, and adjusts input padding to accommodate right-side control.
Testing verify_clear_button.py	New Playwright test script that verifies clear button functionality by navigating to localhost, entering a search query, clicking the clear button, and asserting the input is emptied. Includes screenshot capture and error handling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• 🎨 Palette: Add accessibility labels to dashboard controls #5: Modifies search input in src/app/page.tsx alongside this PR's clear button implementation with related UI enhancements.

Poem

🐰 A rabbit hops through queries so clear,
With X-button magic to banish each fear,
One swift little click, and the search text will go,
Fresh fields for new searches, all ready to flow! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: adding a clear button to the search input component, which aligns with all modifications across the three files.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into master

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch palette/feat/clear-search-button-10200799507076815915

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/app/page.tsx (1)

355-363: Add type="button" to the clear button.

The <button> element defaults to type="submit". While there's no enclosing <form> today, explicitly setting type="button" is a defensive best practice that prevents accidental form submission if this component is ever wrapped in a form.

Proposed fix

                      {searchQuery && (
                        <button
+                         type="button"
                          onClick={() => setSearchQuery('')}
                          className="absolute right-4 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20 rounded-full p-1"
                          aria-label="Clear search"
                        >

verify_clear_button.py (2)

45-48: Use bare raise to preserve the original traceback.

raise e resets the traceback to this line. A bare raise preserves the full original traceback, which is more useful for debugging.

Proposed fix

         except Exception as e:
             print(f"Verification failed: {e}")
             page.screenshot(path="verification_error.png")
-            raise e
+            raise

---

1-53: Consider adding a timeout for page.goto to avoid hanging indefinitely.

If the local server isn't running, the script will hang. Adding a timeout makes failures faster and more obvious.

Proposed fix

-            page.goto("http://localhost:3008")
+            page.goto("http://localhost:3008", timeout=15000)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}