Playlists grid

src/js/components/ContextMenu.js

@@ -2,6 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
 
 import TrackList from './TrackList'
 import * as uiActions from '../services/ui/actions'
@@ -82,6 +83,7 @@ class ContextMenu extends React.Component{
 							return (
 								<span key={item.handleClick} className="menu-item has-submenu">
 									{ item.label }
+									<FontAwesome name="caret-right" />
 									{ this.renderPlaylistSubmenu() }
 								</span>
 							)

src/js/components/GridItem.js

@@ -1,6 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { Link, browserHistory } from 'react-router'
+import FontAwesome from 'react-fontawesome'
 
 import Thumbnail from './Thumbnail'
 import ArtistSentence from './ArtistSentence'
@@ -37,8 +38,9 @@ export default class GridItem extends React.Component{
 				<div className="name">{ item.name }</div>
 				<div className="secondary">
 					{ item.artists ? <ArtistSentence artists={ item.artists } /> : null }
-					{ item.type == 'playlist' ? item.tracks.total+' tracks' : null }
+					{ item.type == 'playlist' && item.tracks ? item.tracks.total+' tracks' : null }
 					{ item.followers ? item.followers.total.toLocaleString()+' followers' : null }
+					{ item.type == 'playlist' && item.can_edit ? <FontAwesome name="edit" /> : null }
 				</div>
 			</div>
 		);

src/js/views/library/LibraryPlaylists.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
 
-import List from '../../components/List'
+import PlaylistGrid from '../../components/PlaylistGrid'
 import Header from '../../components/Header'
 
 import * as mopidyActions from '../../services/mopidy/actions'
@@ -19,9 +19,10 @@ class LibraryPlaylists extends React.Component{
 	render(){
 		if( !this.props.playlists ) return null
 		var columns = [
-			{ name: 'name', width: '40'},
+			{ name: 'name', width: '30'},
+			{ name: 'tracks.total', width: '15'},
 			{ name: 'can_edit', width: '15'},
-			{ name: 'uri', width: '45'}
+			{ name: 'uri', width: '40'}
 		]
 
 		return (
@@ -29,8 +30,8 @@ class LibraryPlaylists extends React.Component{
 
 				<Header icon="playlist" title="My playlists" />
 
-				<section className="list-wrapper">
-					<List columns={columns} rows={this.props.playlists} link_prefix="/playlist/" />
+				<section className="grid-wrapper">
+					<PlaylistGrid playlists={this.props.playlists} />
 				</section>
 
 			</div>

src/scss/components/_context-menu.scss

@@ -26,6 +26,12 @@
 			}
 		}
 
+		.fa {
+			font-size: 10px;
+			float: right;
+			padding-top: 4px;
+		}
+
 		.submenu {
 			display: none;
 			position: absolute;
@@ -35,8 +41,11 @@
 			overflow-y: scroll;			
 			background: lighten($dark_grey, 5%);
 
-			.menu-item:hover {
-				background: lighten($dark_grey, 10%);
+			.menu-item {
+				width: 150px;
+				&:hover {
+					background: lighten($dark_grey, 10%);
+				}
 			}
 		}
 	}

src/scss/components/_grid.scss

@@ -14,6 +14,7 @@
 		display: inline-block;
 		vertical-align: top;
 		border-bottom: 0;
+		position: relative;
 
 		.thumbnail {
 			@include animate();
@@ -31,6 +32,11 @@
 			color: $secondary_grey;
 		}
 
+		.fa {
+			font-size: 10px;
+			padding-left: 4px;
+		}
+
 		&:hover{
 			cursor: pointer;