feat: match filter input to sidebar search styling
All checks were successful
CI / cleanup-branch (pull_request) Has been skipped
CI / build (pull_request) Successful in 2m11s
CI / cleanup-branch (push) Has been skipped
CI / docker (pull_request) Has been skipped
CI / build (push) Successful in 2m11s
CI / deploy (pull_request) Has been skipped
CI / deploy-feature (pull_request) Has been skipped
CI / docker (push) Successful in 1m11s
CI / deploy (push) Has been skipped
CI / deploy-feature (push) Successful in 40s

Add search icon, translucent background, and same padding/sizing
as the sidebar's built-in filter input. Placeholder changed to
"Filter..." to match sidebar convention.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-16 15:22:23 +02:00
parent e84822f211
commit 3a9f3f41de
2 changed files with 16 additions and 8 deletions

View File

@@ -383,20 +383,27 @@
margin-bottom: 12px;
}
/* App name filter */
/* App name filter — matches sidebar search input styling */
.appFilterWrap {
position: relative;
display: flex;
align-items: center;
}
.appFilterIcon {
position: absolute;
left: 8px;
color: var(--text-muted);
pointer-events: none;
}
.appFilterInput {
width: 180px;
height: 28px;
padding: 0 24px 0 8px;
border: 1px solid var(--border-subtle);
height: 29px;
padding: 6px 26px 6px 28px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
background: transparent;
background: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
font-size: 12px;
font-family: var(--font-body);
@@ -414,7 +421,7 @@
.appFilterClear {
position: absolute;
right: 4px;
right: 6px;
background: transparent;
border: none;
color: var(--text-muted);

View File

@@ -1,6 +1,6 @@
import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router';
import { ExternalLink, RefreshCw, Pencil, LayoutGrid, List, ChevronRight, ChevronDown, ArrowUp, ArrowDown } from 'lucide-react';
import { ExternalLink, RefreshCw, Pencil, LayoutGrid, List, ChevronRight, ChevronDown, ArrowUp, ArrowDown, Search } from 'lucide-react';
import {
StatCard, StatusDot, Badge, MonoText,
GroupCard, DataTable, EventFeed,
@@ -708,10 +708,11 @@ export default function AgentHealth() {
</button>
</div>
<div className={styles.appFilterWrap}>
<Search size={12} className={styles.appFilterIcon} />
<input
type="text"
className={styles.appFilterInput}
placeholder="Filter apps..."
placeholder="Filter..."
value={appFilter}
onChange={(e) => setAppFilter(e.target.value)}
aria-label="Filter applications"