Version bump; Polishing list elements (source on right); Security patches

src/js/components/List.js

@@ -4,7 +4,7 @@ import { ListItem } from './ListItem'
 
 const List = ({
   items,
-  className,
+  className = '',
   ...rest
 }) => {
   if (!items || !items.length) return null;

src/js/components/ListItem.js

@@ -12,7 +12,7 @@ import Popularity from './Popularity';
 import Link from './Link';
 import { I18n } from '../locale';
 import { encodeUri } from '../util/format';
-import { scrollTo } from '../util/helpers';
+import { scrollTo, sourceIcon } from '../util/helpers';
 
 import * as uiActions from '../services/ui/actions';
 import * as lastfmActions from '../services/lastfm/actions';
@@ -47,6 +47,8 @@ const getValue = (item = {}, name = '') => {
       if (!total && !array) return null;
       return <I18n path="specs.albums" count={total || array.length} />;
     }
+    case 'source':
+      return <Icon type="fontawesome" name={sourceIcon(item.uri)} fixedWidth />;
     default:
       break;
   }

src/js/components/SmartList.js

@@ -15,7 +15,7 @@ const SmartListBatch = handleViewport(
     itemProps,
     batchIndex,
     chunkSize,
-    className = 'smart-list__batch',
+    className = '',
   }) => {
     // Listen for changes to our height, and pass it up to our Grid. This is then used to build the
     // placeholder elements when out of viewport. We only care about the first item because this
@@ -33,9 +33,9 @@ const SmartListBatch = handleViewport(
     }
 
     return (
-      <div className={className} ref={forwardedRef}>
+      <div className={`smart-list__batch ${className}`} ref={forwardedRef}>
         {inViewport || isFirst ? (
-          <div style={isFirst ? {} : { minHeight: itemHeight }}>
+          <div className="smart-list__batch__inner" style={isFirst ? {} : { minHeight: itemHeight }}>
             {
               items.map((item, index) => (
                 <ItemComponent

src/js/views/library/LibraryAlbums.js

@@ -181,8 +181,8 @@ class LibraryAlbums extends React.Component {
         <section className="content-wrapper">
           <List
             items={albums}
-            details={['artists', 'followers', 'listeners']}
-            right_column={['tracks']}
+            details={['artists', 'tracks', 'followers']}
+            right_column={['source']}
             thumbnail
           />
         </section>

src/js/views/library/LibraryArtists.js

@@ -167,8 +167,8 @@ class LibraryArtists extends React.Component {
         <section className="content-wrapper">
           <List
             items={artists}
-            details={['followers', 'listeners']}
-            right_column={['albums']}
+            details={['albums', 'followers']}
+            right_column={['source']}
             thumbnail
           />
         </section>

src/scss/components/_lists.scss

@@ -1,3 +1,8 @@
+.smart-list__batch:first-child {
+	.list__item:first-child {
+		border-top: none;
+	}
+}
 
 .list {
 	&__item {
@@ -17,6 +22,11 @@
 		border-radius: 3px;
 		justify-content: space-between;
 		align-content: center;
+		border-top: 1px solid rgba(128,128,128,0.05);
+
+		@include theme('light') {
+			border-top-color: rgba(128,128,128,0.1);
+		}
 
 		&:before {
 			pointer-events: none;
@@ -32,13 +42,6 @@
 			opacity: 0;
 		}
 
-		&:not(:first-child){
-			border-top: 1px solid rgba(128,128,128,0.05);
-
-			@include theme('light') {
-				border-top-color: rgba(128,128,128,0.1);
-			}
-		}
 
 		:root .notouch:not(.dragging) &:not(.list__item--no-interaction){
 			cursor: pointer;
@@ -162,7 +165,7 @@
 
 					&__item {
 						&--details {
-							min-height: 1em;
+							min-height: 1.28em;
 						}
 
 						&--thumbnail {