Added ns2 news links

app/javascripts/components/main.js

@@ -1,3 +1,4 @@
+import {News} from "javascripts/components/news";
 import {Events} from "javascripts/components/event";
 import {InfoButton} from "javascripts/components/info";
 import {Chatroom} from "javascripts/components/message";
@@ -410,6 +411,7 @@ const App = React.createClass({
 									</a>
 								</li>
 								{profileLink}
+								<News />
 								<li>
 									<a href="#" onClick={this.toggleMessageBox} className="dropdown-toggle">
 										<i className="fa fa-comment"></i>

app/javascripts/components/news.js

@@ -0,0 +1,114 @@
+const $ = require("jquery");
+const React = require("react");
+const helper = require("javascripts/helper");
+const storageAvailable = helper.storageAvailable;
+
+const READ_ARTICLES_STORAGE = "akuh098h209ufnw";
+
+const News = exports.News = React.createClass({
+	getInitialState() {
+		let readArticles = {};
+		if (storageAvailable('localStorage')) {
+			const raw = localStorage.getItem(READ_ARTICLES_STORAGE) || {};
+			console.log(raw)
+			let rawJson;
+			try {
+				rawJson = JSON.parse(raw);
+			} catch (e) {
+				rawJson = {};
+			}
+			readArticles = rawJson; 
+		}
+
+		return {
+			posts: [],
+			show: false,
+			readArticles: readArticles
+		};
+	},
+
+	toggleShow() {
+		this.setState({ show: !this.state.show });
+	},
+
+	updatePosts(data) {
+		this.setState({
+			posts: data.posts.slice(0,5).map(post => {
+				return {
+					id: post.id,
+					url: post.url,
+					title: post.title
+				}
+			})
+		});
+	},
+
+	componentDidMount() {
+		$.getJSON("http://ns2news.org/api-json/get_recent_posts?callback=?")
+			.done(this.updatePosts);
+	},
+
+	markAsRead(post) {
+		const self = this;
+		return function (e) {
+			let readArticles = self.state.readArticles;
+			readArticles[post.id] = (new Date()).toJSON();
+			self.setState({readArticles: readArticles});
+
+			if (storageAvailable('localStorage')) {
+				localStorage.setItem(READ_ARTICLES_STORAGE, JSON.stringify(readArticles));
+			}
+		}
+	},
+
+	componentClass() {
+		let componentClass = ["dropdown", "messages-menu"];
+		if (this.state.show) componentClass.push("open");
+		return componentClass.join(" ");
+	},
+
+	hasBeenRead(post) {
+		return (this.state.readArticles[post.id] !== undefined);
+	},
+
+	render() {
+		const articles = this.state.posts.map(post => {
+			let postClass = "";
+			if (!this.hasBeenRead(post)) postClass += "unread";
+			return (
+				<li key={post.id}>
+					<a href={post.url} target="_blank" onClick={this.markAsRead(post)}
+						className={postClass}>{post.title}</a>
+				</li>
+			);
+		});
+
+		const unreadArticles = this.state.posts.reduce((prev, post) => {
+			if (this.hasBeenRead(post)) {
+				return prev;
+			} else {
+				return prev + 1;
+			}
+		}, 0)
+
+		let tag;
+		if (unreadArticles > 0) {
+			tag = <span className="label label-success">{unreadArticles}</span>;
+		}
+
+		return (
+			<li className={this.componentClass()}>
+			  <a href="#" onClick={this.toggleShow}>
+			    <i className="fa fa-newspaper-o"></i>
+			    {tag}
+			  </a>
+			  <ul className="dropdown-menu">
+			    <li className="header">NS2 News.org</li>
+				  <ul className="news-menu">
+				    {articles}
+				  </ul>
+			  </ul>
+			</li>
+		);
+	}
+});

app/stylesheets/app.css

@@ -245,3 +245,18 @@ html, body {
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
+
+/* News */
+
+.news-menu {
+	list-style: none;
+	padding: 5px;
+}
+
+.news-menu li {
+	padding: 5px;
+}
+
+.news-menu .unread {
+	font-weight: bold;
+}

app/stylesheets/theme.css

@@ -939,8 +939,6 @@ a:focus {
 .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
 .navbar-nav > .messages-menu > .dropdown-menu > li.header,
 .navbar-nav > .tasks-menu > .dropdown-menu > li.header {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   background-color: #ffffff;