feat: Add search input to collection and home (#1149)

* feat: Add search input to collection and home

* Tweak spacing

* Add input to drafts/starred too

app/components/InputSearch.js

@@ -0,0 +1,70 @@
+// @flow
+import * as React from 'react';
+import keydown from 'react-keydown';
+import { observer } from 'mobx-react';
+import { observable } from 'mobx';
+import { withRouter, type RouterHistory } from 'react-router-dom';
+import { withTheme } from 'styled-components';
+import { SearchIcon } from 'outline-icons';
+import { searchUrl } from 'utils/routeHelpers';
+import Input from './Input';
+
+type Props = {
+  history: RouterHistory,
+  theme: Object,
+  placeholder?: string,
+  collectionId?: string,
+};
+
+@observer
+class InputSearch extends React.Component<Props> {
+  input: ?Input;
+  @observable focused: boolean = false;
+
+  @keydown('meta+f')
+  focus(ev) {
+    ev.preventDefault();
+
+    if (this.input) {
+      this.input.focus();
+    }
+  }
+
+  handleSearchInput = ev => {
+    ev.preventDefault();
+    this.props.history.push(
+      searchUrl(ev.target.value, this.props.collectionId)
+    );
+  };
+
+  handleFocus = () => {
+    this.focused = true;
+  };
+
+  handleBlur = () => {
+    this.focused = false;
+  };
+
+  render() {
+    const { theme, placeholder = 'Search…' } = this.props;
+
+    return (
+      <Input
+        ref={ref => (this.input = ref)}
+        type="search"
+        placeholder={placeholder}
+        onInput={this.handleSearchInput}
+        icon={
+          <SearchIcon
+            color={this.focused ? theme.inputBorderFocused : theme.inputBorder}
+          />
+        }
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        margin={0}
+      />
+    );
+  }
+}
+
+export default withTheme(withRouter(InputSearch));