feat(ui): add no-results empty state for Toolkit search (#105)

frontend/src/components/toolkit/ToolkitSearchEmpty.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Toolkit search empty state', () => {
+  it('empty state should NOT appear on initial load', () => {
+    const searchQuery = ''
+    const showEmpty = searchQuery.trim().length > 0
+    expect(showEmpty).toBe(false)
+  })
+
+  it('empty state should appear when query active and no tools match', () => {
+    const searchQuery = 'xyznotreal'
+    const filteredTools: unknown[] = []
+    const allToolsLoaded = true
+    const showEmpty =
+      allToolsLoaded &&
+      searchQuery.trim().length > 0 &&
+      filteredTools.length === 0
+    expect(showEmpty).toBe(true)
+  })
+
+  it('clear search resets query to empty string', () => {
+    let searchQuery = 'nmap'
+    const clearSearch = () => { searchQuery = '' }
+    clearSearch()
+    expect(searchQuery).toBe('')
+  })
+
+  it('data-testid attributes are defined as constants', () => {
+    expect('toolkit-search-empty').toBeTruthy()
+    expect('toolkit-search-empty-clear').toBeTruthy()
+  })
+})

frontend/src/pages/Toolkit.tsx

@@ -449,16 +449,29 @@ export default function Scanner() {
                 <div className="space-y-6">
                   {searchQuery.trim().length > 0 ? (
                     <>
-                      <div className="text-[10px] font-black uppercase tracking-[0.3em] text-rag-amber">No tools match search</div>
-                      <p className="text-[10px] text-silver/60 uppercase tracking-widest leading-relaxed">
-                        No tools in this category match the current query.
-                      </p>
-                      <button
-                        onClick={() => setSearchQuery('')}
-                        className="px-6 py-3 text-[10px] font-black uppercase tracking-[0.3em] bg-rag-blue text-black border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all"
+                      <div
+                        role="status"
+                        aria-live="polite"
+                        aria-label={`No tools found for "${searchQuery.trim()}"`}
+                        data-testid="toolkit-search-empty"
+                        className="space-y-6"
                       >
-                        Clear Search
-                      </button>
+                        <div className="text-[10px] font-black uppercase tracking-[0.3em] text-rag-amber">
+                          No tools match &ldquo;{searchQuery.trim()}&rdquo;
+                        </div>
+                        <p className="text-[10px] text-silver/60 uppercase tracking-widest leading-relaxed">
+                          No tools in this category match the current search query.
+                        </p>
+                        <button
+                          type="button"
+                          data-testid="toolkit-search-empty-clear"
+                          aria-label="Clear search and show all tools"
+                          onClick={() => setSearchQuery('')}
+                          className="px-6 py-3 text-[10px] font-black uppercase tracking-[0.3em] bg-rag-blue text-black border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all"
+                        >
+                          Clear Search
+                        </button>
+                      </div>
                     </>
                   ) : categoryToolsCount === 0 ? (
                     <>

frontend/testing/unit/pages/ScannerEmptyState.test.tsx

@@ -54,10 +54,10 @@ describe('Scanner empty-state UX', () => {
     await user.click(await screen.findByRole('tab', { name: /Recon Tools/i }))
     await screen.findByText(/WHOIS Lookup/i)
     await user.type(screen.getByPlaceholderText('SEARCH_PROTOCOLS...'), 'nothing-will-match')
-    expect(screen.getByText(/No tools match search/i)).toBeInTheDocument()
+    expect(screen.getByTestId('toolkit-search-empty')).toBeInTheDocument()
 
     await user.click(screen.getByRole('button', { name: /Clear Search/i }))
-    expect(screen.queryByText(/No tools match search/i)).not.toBeInTheDocument()
+    expect(screen.queryByTestId('toolkit-search-empty')).not.toBeInTheDocument()
 
     await user.click(screen.getByRole('tab', { name: /Robots/i }))
     await waitFor(() => {