Add hightlight style for unused tags in editor

player.js

@@ -124,7 +124,7 @@ app.get('/', function(req, res, next) {
 });
 
 app.get('/api/tags', function(req, res, next) {
-  db.all("SELECT DISTINCT tag FROM tags", (err, rows) => {
+  db.all("SELECT tags.tag, count(library.tag) tag_count FROM (SELECT DISTINCT tag FROM tags) tags LEFT JOIN library ON tags.tag = library.tag GROUP BY tags.tag", (err, rows) => {
     res.send(rows);
   });
 });

static/css/index.css

@@ -27,3 +27,8 @@ footer {
     padding: 1ex;
     border: 1px solid hsl(0, 0%, 88.2%);
 }
+
+option.unused {
+    font-style: italic;
+    color: red;
+}

static/library.js

@@ -57,8 +57,8 @@
         <template v-if="editing">
           <form method="patch" :action="patch_url">
             <select v-model="track.tag" :disabled="saving">
-              <option v-for="tag in tags">
-                {{ tag }}
+              <option :class="{unused: tag.tag_count == 0}" v-for="tag in tags">
+                {{ tag.tag }}
               </option>
             </select>
             <input type="text" v-model="track.label" :disabled="saving">
@@ -100,7 +100,7 @@
       return response.json();
     })
     .then(response => {
-      appData.tags = response.map(tag => tag.tag);
+      appData.tags = response;
     })
     .catch(error => {
       console.error(error);