\n {/* Email Filter */}\n

\n \n 📧 Filter by Email\n \n onFilterChange({ email: e.target.value })}\n onFocus={() => setShowEmailSuggestions(true)}\n onBlur={() => setTimeout(() => setShowEmailSuggestions(false), 200)}\n placeholder=\"Enter email address...\"\n className=\"filter-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n />\n \n {/* Email Suggestions */}\n {showEmailSuggestions && emailSuggestions.length > 0 && (\n

\n {emailSuggestions.map((email, index) => (\n {\n onFilterChange({ email });\n setShowEmailSuggestions(false);\n }}\n className=\"w-full px-3 py-2 text-left hover:bg-gray-50 text-sm border-b border-gray-100 last:border-b-0\"\n >\n {email}\n \n ))}\n

\n )}\n

\n\n {/* Trace ID Filter */}\n

\n \n 🔍 Filter by Trace ID\n \n onFilterChange({ traceId: e.target.value })}\n onFocus={() => setShowTraceIdSuggestions(true)}\n onBlur={() => setTimeout(() => setShowTraceIdSuggestions(false), 200)}\n placeholder=\"Enter trace ID...\"\n className=\"filter-input w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none\"\n />\n \n {/* Trace ID Suggestions */}\n {showTraceIdSuggestions && traceIdSuggestions.length > 0 && (\n

\n {traceIdSuggestions.map((traceId, index) => (\n {\n onFilterChange({ traceId });\n setShowTraceIdSuggestions(false);\n }}\n className=\"w-full px-3 py-2 text-left hover:bg-gray-50 text-sm font-mono text-xs border-b border-gray-100 last:border-b-0\"\n >\n {traceId}\n \n ))}\n

\n )}\n

\n\n {/* Action Buttons */}\n

\n {hasActiveFilters && (\n \n 🗑️ Clear\n \n )}\n \n {onExport && filteredCount > 0 && (\n \n 📥 Export\n \n )}\n

\n\n {/* Results Summary */}\n

\n 📊 Results:\n \n {filteredCount.toLocaleString()}\n \n {filteredCount !== totalCount && (\n <>\n of\n \n {totalCount.toLocaleString()}\n \n \n )}\n

\n\n {hasActiveFilters && (\n

\n 🔍 Active filters:\n {filters.email && (\n \n Email: {filters.email}\n \n )}\n {filters.traceId && (\n \n Trace: {filters.traceId}\n \n )}\n

\n )}\n

\n );\n}","deleted","label",[175,176,158],"frontend","components","permalink","https://www.val.town/x/pixiebrix/telemetry-db-trace-viewer/code/frontend/components/FilterControls.tsx","extension","actionData","errors"]