Add hover effects for missing and shared tags

static/css/index.css

@@ -29,12 +29,21 @@ footer {
     margin-top: 2em;
     font-size: 0.75rem;
 }
-
 .media-track {
     margin: 1ex 0;
     padding: 1ex;
     border: 1px solid hsl(0, 0%, 88.2%);
 }
+.media-track-highlighted {
+    background-color: hsl(81, 100%, 96.1%);
+    border-color: hsl(118.1, 72%, 58%);
+    border-style: dotted;
+}
+.media-track-tagless {
+    background-color: hsl(0, 100%, 95.7%);
+    border-color: hsl(0, 79.5%, 67.5%);
+    border-style: dashed;
+}
 option.unused {
     font-style: italic;
     color: red;

static/library.js

@@ -3,10 +3,15 @@
   var appData = {
     tracks: [],
     tags: [],
+    highlightedTag: null,
   };
 
   const MediaTrack = {
-    props: ['track', 'tags'],
+    props: [
+      'track',
+      'tags',
+      'highlightedTag',
+    ],
     data: function() {
       return {
         editing: false,
@@ -60,9 +65,19 @@
             console.error(error)
           });
       },
+      highlightTag: function() {
+        this.$root.highlightedTag = this.track.tag;
+      },
+      highlightNone: function() {
+        this.$root.highlightedTag = null;
+      },
     },
     template: `
-      <div class="media-track" @click="edit()">
+      <div class="media-track"
+        :class="{ 'media-track-highlighted': track.tag === highlightedTag, 'media-track-tagless': track.tag === '' }"
+        @click="edit()"
+        @mouseover="highlightTag()"
+        @mouseout="highlightNone()">
         <template v-if="editing">
           <form method="patch" :action="patch_url" @keyup.27="cancel">
             <select v-model="track.tag" :disabled="saving">
@@ -81,7 +96,7 @@
   };
 
   const MediaLibrary = {
-    props: ['tracks', 'tags'],
+    props: ['tracks', 'tags', 'highlightedTag'],
     components: {
       'media-track': MediaTrack,
     },
@@ -91,6 +106,7 @@
           :key="track.uuid"
           :track="track"
           :tags="tags"
+          :highlightedTag="highlightedTag"
         ></media-track>
       </div>
     `,

views/library.hbs

@@ -1,7 +1,8 @@
 <div id="app">
     <media-library
-        v-bind:tracks="tracks"
+        :tracks="tracks"
-        v-bind:tags="tags"
+        :tags="tags"
+        :highlighted-tag="highlightedTag"
     ></media-library>
     <upload-box></upload-box>
 </div>