feat(runs): add log search with backend LIKE filter and pagination

- add Search pill component with lucide icon and focus highlight
- wire debounced search input to GET /run/:id?q= backend filter
- backend filters run logs with LIKE %q% via TypeORM
- add sectionHeadingRow layout for heading + search alignment
- add i18n keys: runs.step_title, logs_search_placeholder
This commit is contained in:
2026-04-10 15:09:05 +03:00
parent fd655c3253
commit 2046e64428
9 changed files with 119 additions and 9 deletions
+36
View File
@@ -0,0 +1,36 @@
.root {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 5px var(--space-3);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-bg-subtle);
transition: border-color var(--transition), background var(--transition);
}
.root:focus-within {
border-color: var(--color-primary);
background: var(--color-bg);
}
.icon {
color: var(--color-text-muted);
flex-shrink: 0;
display: block;
}
.input {
border: none;
background: transparent;
color: var(--color-text);
font-family: var(--font-family);
font-size: var(--font-size-xs);
outline: none;
width: 180px;
min-width: 0;
}
.input::placeholder {
color: var(--color-text-muted);
}
+23
View File
@@ -0,0 +1,23 @@
import { Search as SearchIcon } from 'lucide-react';
import styles from './Search.module.css';
export interface SearchProps {
value: string;
onChange: (value: string) => void;
placeholder?: string;
}
export function Search({ value, onChange, placeholder = 'Search…' }: SearchProps) {
return (
<div className={styles.root}>
<SearchIcon size={13} className={styles.icon} />
<input
className={styles.input}
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
/>
</div>
);
}
+3
View File
@@ -33,6 +33,9 @@ export type { TimestampProps } from './Timestamp/Timestamp';
export { Pagination } from './Pagination/Pagination';
export type { PaginationProps } from './Pagination/Pagination';
export { Search } from './Search/Search';
export type { SearchProps } from './Search/Search';
export { ContextMenu } from './ContextMenu/ContextMenu';
export type { ContextMenuProps, ContextMenuItem } from './ContextMenu/ContextMenu';