client/tags: mark used tags in autocomplete

client/css/forms.styl

@@ -325,3 +325,5 @@ input[type=file]:focus+.file-dropper,
                 color: $button-enabled-text-color
                 span
                     color: $button-enabled-text-color
+            .disabled
+                color: $inactive-link-color

client/js/controls/tag_auto_complete_control.js

@@ -10,7 +10,9 @@ class TagAutoCompleteControl extends AutoCompleteControl {
         const caseSensitive = false;
         const minLengthForPartialSearch = 3;
 
-        options = Object.assign({}, options);
+        options = Object.assign({
+            isTaggedWith: tag => false,
+        }, options);
 
         options.getMatches = text => {
             const transform = caseSensitive ?
@@ -30,7 +32,10 @@ class TagAutoCompleteControl extends AutoCompleteControl {
                         tags.getOriginalTagName(kv[0]));
                     const category = kv[1].category;
                     const usages = kv[1].usages;
-                    const cssName = misc.makeCssName(category, 'tag');
+                    let cssName = misc.makeCssName(category, 'tag');
+                    if (options.isTaggedWith(kv[0])) {
+                        cssName += ' disabled';
+                    }
                     return {
                         caption: misc.unindent`
                             <span class="${cssName}">

client/js/controls/tag_input_control.js

@@ -56,6 +56,7 @@ class TagInputControl extends events.EventTarget {
                     this.addTag(text, SOURCE_USER_INPUT);
                 },
                 verticalShift: -2,
+                isTaggedWith: tagName => this.isTaggedWith(tagName),
             });
         this._tagInputNode.addEventListener(
             'keydown', e => this._evtInputKeyDown(e));