Skip to content

feat: add clear (×) button to target input (closes #197)#210

Open
Maqbool61 wants to merge 1 commit into
NovaCode37:mainfrom
Maqbool61:feat/clear-target-input
Open

feat: add clear (×) button to target input (closes #197)#210
Maqbool61 wants to merge 1 commit into
NovaCode37:mainfrom
Maqbool61:feat/clear-target-input

Conversation

@Maqbool61

Copy link
Copy Markdown
Contributor

What

Adds a small clear button inside the target input that appears when there is text and empties the field on click — handy on mobile where selecting-all-and-deleting is fiddly.

Changes (frontend/src/components/Sidebar.tsx)

  • Added X to lucide-react imports
  • Wrapped the target <input> in a relative div
  • Added pr-7 padding to the input when target has text so the clear button never overlaps the typed content
  • Clear button appears conditionally ({target && ...}), positioned absolute right-2 top-1/2 -translate-y-1/2
  • Clicking calls setTarget(''), aria-label="Clear target" for accessibility

Verified

npx tsc --noEmit → 0 errors ✅

How to test

  1. Type anything into the target field → × button appears on the right
  2. Click it → field clears instantly
  3. Empty field → no button shown
  4. During a running scan → input is disabled, button correctly not shown (target is already set)

Closes #197

@Maqbool61 Maqbool61 requested a review from NovaCode37 as a code owner July 14, 2026 06:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a clear button to the target input

1 participant