[task] Design a friends list view and implement it with HTML/CSS/JavaScript/react.js

You have basic HTML/CSS and JavaScript knowlegde and want to contribute to Retroshare?
Here is a small project with clearly defined scope. It should costs you not more than one or two weeks/weekends.
It is perfect for new contributors.

The peers list of the new webinterface was made quick&dirty, just to show that the backend works. As result, the list is implemented as table with columns like avatar, name, locations. It does not fit on small screens and it looks ugly.

A new react component should be made which satisfies the following requirements:
- show name, avatar image, locations, online state
- fits on mobile phone screen
- easy to see which friends are online and which are not

The component takes JavScript list as input, and generates the HTML with react.js

maybe:
- implement filter to show only online friends
- sort friends list by name

areas for research:
- long-tap menu for mobile phones, or context menu for desktop


More notes below:
-------------------------------------------------------------------------
Component to display the friends list
(see also Peers2 in retroshare-svn/trunk/libresapi/webui/gui.jsx)

goals:
- make it easy to see which friend is online
- make the layout fit to the narrow screen of a mobile phone

var Peers3 = React.createClass({
  // AutoUpdateMixin: fetches the data and sets this.state
  // SignalSlotMixin: to send commands to other components with this.emit
  mixins: [AutoUpdateMixin, SignalSlotMixin],
  // called by AutoUpdateMixin, defines which data to fetch
  getPath: function(){return "peers";},
  // called by react when component is created
  getInitialState: function(){
  	return {data: []};
  },
  // event handler for an "add friend" button
  add_friend_handler: function(){
  	this.emit("change_url", {url: "add_friend"});
  },
  // called by react
  render: function(){
  	return <div>{/*TODO: generate html to display this.state*/}</div>;
  },
});


The data in this.state.data looks like this:
[{
  "locations": [{
  	"avatar_address": "/asdf/avatar_image",
  	"groups": null,
  	"is_online": false,
  	"location": "home",
  	"name": "max",
  	"peer_id": "asdf",
  	"pgp_id": "yxcv"
  },
  ... more locations ...
  ],
  "name": "max",
  "pgp_id": "yxcv"
},
... more peers ...
]


other components:
downloads
- i'm not very happy about the unfriendly big numbers. better use KB, MB, GB
- visualize the download progress with a progress bar
- move actions to a context menue or to a long-tap menue on mobile devices?

search
- display previous searches (path=filesearch)