client/posts: add proof of concept for post list

client/js/views/posts_header_view.js

@@ -0,0 +1,41 @@
+'use strict';
+
+const page = require('page');
+const keyboard = require('../util/keyboard.js');
+const misc = require('../util/misc.js');
+const views = require('../util/views.js');
+const TagAutoCompleteControl =
+    require('../controls/tag_auto_complete_control.js');
+
+class PostsHeaderView {
+    constructor() {
+        this._template = views.getTemplate('posts-header');
+    }
+
+    render(ctx) {
+        const target = ctx.target;
+        const source = this._template(ctx);
+
+        const form = source.querySelector('form');
+        const searchTextInput = form.querySelector('[name=search-text]');
+
+        if (searchTextInput) {
+            new TagAutoCompleteControl(searchTextInput);
+        }
+
+        keyboard.bind('q', () => {
+            form.querySelector('input').focus();
+        });
+
+        form.addEventListener('submit', e => {
+            e.preventDefault();
+            const text = searchTextInput.value;
+            searchTextInput.blur();
+            page('/posts/' + misc.formatSearchQuery({text: text}));
+        });
+
+        views.showView(target, source);
+    }
+}
+
+module.exports = PostsHeaderView;