alert settings: Move alert word form on top and sort alert words.

The form for entering alert words has been moved above the list
of words.
The list of words will be presented alphabetically rather than
time of addition.

frontend_tests/node_tests/alert_words_ui.js

@@ -30,9 +30,9 @@ run_test('render_alert_words_ui', () => {
     alert_words_ui.render_alert_words_ui();
 
     assert.deepEqual(appended, [
-        'stub-foo',
-        'stub-bar',
         'stub-',
+        'stub-bar',
+        'stub-foo',
     ]);
     assert(new_alert_word.is_focused());
 });

static/js/alert_words_ui.js

@@ -2,10 +2,17 @@ const render_alert_word_settings_item = require('../templates/alert_word_setting
 
 exports.render_alert_words_ui = function () {
     const words = alert_words.get_word_list();
+    words.sort();
     const word_list = $('#alert_words_list');
 
     word_list.find('.alert-word-item').remove();
 
+    const new_alert_word_form = render_alert_word_settings_item({
+        word: '',
+        editing: true,
+    });
+    word_list.append(new_alert_word_form);
+
     for (const alert_word of words) {
         const rendered_alert_word = render_alert_word_settings_item({
             word: alert_word,
@@ -14,12 +21,6 @@ exports.render_alert_words_ui = function () {
         word_list.append(rendered_alert_word);
     }
 
-    const new_alert_word_form = render_alert_word_settings_item({
-        word: '',
-        editing: true,
-    });
-    word_list.append(new_alert_word_form);
-
     // Focus new alert word name text box.
     $('#create_alert_word_name').focus();
 };

static/styles/settings.scss

@@ -1046,7 +1046,7 @@ input[type=checkbox].inline-block {
     list-style-type: none;
 }
 
-#alert_words_list li.alert-word-item:last-child {
+#alert_words_list li.alert-word-item:first-child {
     background: none;
     margin-top: 8px;
 }