add button

src/settings/components/form/blacklist-form.jsx

@@ -1,4 +1,5 @@
 import './blacklist-form.scss';
+import AddButton from '../ui/add-button';
 import DeleteButton from '../ui/delete-button';
 import { h, Component } from 'preact';
 
@@ -22,6 +23,7 @@ class BlacklistForm extends Component {
           </div>;
         })
       }
+      <AddButton name='add' onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
@@ -36,6 +38,8 @@ class BlacklistForm extends Component {
 
     if (name === 'url') {
       next[index] = e.target.value;
+    } else if (name === 'add') {
+      next.push('');
     } else if (name === 'delete') {
       next.splice(index, 1);
     }

src/settings/components/form/search-engine-form.jsx

@@ -1,5 +1,6 @@
 import './search-engine-form.scss';
 import { h, Component } from 'preact';
+import AddButton from '../ui/add-button';
 import DeleteButton from '../ui/delete-button';
 
 class SearchEngineForm extends Component {
@@ -40,6 +41,7 @@ class SearchEngineForm extends Component {
           </div>;
         })
       }
+      <AddButton name='add' onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
@@ -58,6 +60,8 @@ class SearchEngineForm extends Component {
       next.engines[index][1] = e.target.value;
     } else if (name === 'default') {
       next.default = this.props.value.engines[index][0];
+    } else if (name === 'add') {
+      next.engines.push(['', '']);
     } else if (name === 'delete') {
       next.engines.splice(index, 1);
     }

src/settings/components/ui/add-button.jsx

@@ -0,0 +1,12 @@
+import './add-button.scss';
+import { h, Component } from 'preact';
+
+class AddButton extends Component {
+  render() {
+    return <input
+      className='ui-add-button' type='button' value='Add'
+      {...this.props} />;
+  }
+}
+
+export default AddButton;

src/settings/components/ui/add-button.scss

@@ -0,0 +1,3 @@
+.ui-add-button {
+  font-size: 80%
+}