seach improvement

packages/web/src/widgets/SearchInput.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import keycodes from '../utility/keycodes';
+
+const StyledInput = styled.input`
+  flex: 1;
+  min-width: 90px;
+`;
+
+export default function SearchInput({ placeholder, filter, setFilter }) {
+  const handleKeyDown = (ev) => {
+    if (ev.keyCode == keycodes.escape) {
+      setFilter('');
+    }
+  };
+  return (
+    <StyledInput
+      type="text"
+      placeholder={placeholder}
+      value={filter}
+      onChange={(e) => setFilter(e.target.value)}
+      onFocus={(e) => e.target.select()}
+      onKeyDown={handleKeyDown}
+    />
+  );
+}