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

View File

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