added a favorites section to home, added kind property to horizontal scroller

src/renderer/style.less

@@ -2306,6 +2306,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   &:hover::-webkit-scrollbar-thumb {
     box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
   }
+
+  &.small {
+    overflow-x: overlay;
+    height: 210px;
+  }
 }
 
 /* mediaitem-list-item */

src/renderer/views/components/mediaitem-scroller-horizontal.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal">
     <template>
-        <div class="cd-hmedia-scroller">
+        <div class="cd-hmedia-scroller" :class="kind">
-            <mediaitem-square :item="item"
+            <mediaitem-square :kind="kind" :item="item"
                               v-for="item in items"></mediaitem-square>
         </div>
     </template>
@@ -10,7 +10,17 @@
 <script>
     Vue.component('mediaitem-scroller-horizontal', {
         template: '#mediaitem-scroller-horizontal',
-        props: ['items'],
+        props: {
+            'items': {
+                type: Array,
+                required: true
+            },
+            'kind': {
+                type: String,
+                required: false,
+                defualt: ""
+            }
+        },
         data: function () {
             return {
                 app: this.$root,

src/renderer/views/pages/home.ejs

@@ -19,6 +19,14 @@
                 </div>
             </div>
         </div>
+        <div class="row">
+            <div class="col">
+                <h3>Your Favorites</h3>
+                <div class="well">
+                    <mediaitem-scroller-horizontal kind="small" :items="friendsListeningTo" :item="item"></mediaitem-scroller-horizontal>
+                </div>
+            </div>
+        </div>
         <div class="row">
             <div class="col">
                 <h3>Made For You</h3>