White mac native + notification test

client/uiwails/frontend/src/components/ui/SearchInput.tsx

@@ -0,0 +1,47 @@
+interface SearchInputProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  className?: string
+}
+
+export default function SearchInput({ value, onChange, placeholder = 'Search...', className }: SearchInputProps) {
+  return (
+    <div className={`relative ${className ?? ''}`}>
+      <svg
+        className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5"
+        style={{ color: 'var(--color-text-tertiary)' }}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <circle cx={11} cy={11} r={8} />
+        <path d="m21 21-4.3-4.3" />
+      </svg>
+      <input
+        className="w-full text-[13px] outline-none transition-shadow"
+        style={{
+          height: 28,
+          paddingLeft: 28,
+          paddingRight: 8,
+          backgroundColor: 'var(--color-control-bg)',
+          border: '0.5px solid transparent',
+          borderRadius: 999,
+          color: 'var(--color-text-primary)',
+        }}
+        placeholder={placeholder}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        onFocus={e => {
+          e.currentTarget.style.boxShadow = '0 0 0 3px rgba(246,131,48,0.3)'
+          e.currentTarget.style.borderColor = 'var(--color-accent)'
+        }}
+        onBlur={e => {
+          e.currentTarget.style.boxShadow = 'none'
+          e.currentTarget.style.borderColor = 'transparent'
+        }}
+      />
+    </div>
+  )
+}