feat(cleaner-history): add renderer search types and highlight utility
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
27
src/renderer/src/components/cleaner-history-highlight.tsx
Normal file
27
src/renderer/src/components/cleaner-history-highlight.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from 'react'
|
||||
|
||||
/**
|
||||
* Highlight matching text with a <mark> tag
|
||||
* Case-insensitive matching of the query within text
|
||||
*/
|
||||
export function highlightText(text: string, query: string): React.ReactNode {
|
||||
if (!query || !text) return text
|
||||
|
||||
const lowerText = text.toLowerCase()
|
||||
const lowerQuery = query.toLowerCase()
|
||||
|
||||
const index = lowerText.indexOf(lowerQuery)
|
||||
if (index === -1) return text
|
||||
|
||||
const before = text.substring(0, index)
|
||||
const match = text.substring(index, index + query.length)
|
||||
const after = text.substring(index + query.length)
|
||||
|
||||
return (
|
||||
<>
|
||||
{before}
|
||||
<mark className="bg-yellow-200 text-inherit rounded px-0.5">{match}</mark>
|
||||
{highlightText(after, query)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -129,3 +129,21 @@ export interface CleanerHistoryMaterialRecord {
|
||||
attemptCount: number
|
||||
finalErrorCategory: string | null
|
||||
}
|
||||
|
||||
// Search result types (mirrors main process types)
|
||||
|
||||
export interface CleanerHistorySearchOrderResult {
|
||||
order: CleanerHistoryOrderRecord
|
||||
materials: CleanerHistoryMaterialRecord[]
|
||||
}
|
||||
|
||||
export interface CleanerHistorySearchBatchResult {
|
||||
batch: CleanerHistoryBatchStats
|
||||
executions: CleanerHistoryExecutionRecord[]
|
||||
orders: CleanerHistorySearchOrderResult[]
|
||||
}
|
||||
|
||||
export interface CleanerHistorySearchResult {
|
||||
batches: CleanerHistorySearchBatchResult[]
|
||||
totalMatches: number
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user