3 files changed, 32 insertions, 14 deletions
diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index cbdc5833..ffb14589 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -15,7 +15,7 @@ var MainApp = React.createClass({
                     <Grid fluid id="jarr-container">
                         <Menu />
                         <Col id="middle-panel" mdOffset={3} lgOffset={2}
-                                            xs={4} sm={4} md={4} lg={4}>
+                                            xs={12} sm={4} md={4} lg={4}>
                             <MiddlePanel.MiddlePanelFilter />
                             <MiddlePanel.MiddlePanel />
                         </Col>
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 60578f8a..4537ee81 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -84,13 +84,15 @@ var CategoryGroup = React.createClass({
                 name: React.PropTypes.string.isRequired,
                 feeds: React.PropTypes.array.isRequired,
                 unread: React.PropTypes.number.isRequired,
-                folded: React.PropTypes.bool.isRequired,
+                folded: React.PropTypes.bool,
     },
     getInitialState: function() {
-        return {folded: this.props.folded};
+        return {folded: false};
     },
     componentWillReceiveProps: function(nextProps) {
-        this.setState({folded: nextProps.folded});
+        if(nextProps.folded != null) {
+            this.setState({folded: nextProps.folded});
+        }
     },
     render: function() {
         // hidden the no category if empty
@@ -265,7 +267,22 @@ var Menu = React.createClass({
         );
     },
     componentDidMount: function() {
-        MenuActions.reload();
+        var setFilterFunc = null;
+        var id = null;
+        if(window.location.search.substring(1)) {
+            var args = window.location.search.substring(1).split('&');
+            args.map(function(arg) {
+                if (arg.split('=')[0] == 'at' && arg.split('=')[1] == 'c') {
+                    setFilterFunc = MiddlePanelActions.setCategoryFilter;
+                } else if (arg.split('=')[0] == 'at' && arg.split('=')[1] == 'f') {
+                    setFilterFunc = MiddlePanelActions.setFeedFilter;
+
+                } else if (arg.split('=')[0] == 'ai') {
+                    id = parseInt(arg.split('=')[1]);
+                }
+            });
+        }
+        MenuActions.reload(setFilterFunc, id);
         MenuStore.addChangeListener(this._onChange);
     },
     componentWillUnmount: function() {
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index dad33acc..f6e44777 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -35,7 +35,8 @@ var TableLine = React.createClass({
             icon = <Glyphicon glyph="ban-circle" />;
         }
         var title = (<a href={'/article/redirect/' + this.props.article_id}
-                        onClick={this.openRedirectLink}>
+                        onClick={this.openRedirectLink} target="_blank"
+                        title={this.props.feed_title}>
                         {icon} {this.props.feed_title}
                      </a>);
         var read = (<Glyphicon glyph={this.state.read?"check":"unchecked"}
@@ -43,21 +44,17 @@ var TableLine = React.createClass({
         var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"}
                                 onClick={this.toogleLike} />);
         icon = <Glyphicon glyph={"new-window"} />;
-        var newTab = (<a href={'/article/redirect/' + this.props.article_id}
-                        onClick={this.openRedirectLink} target="_blank">
-                        {icon}
-                     </a>);
         var clsses = "list-group-item";
         if(this.props.selected) {
             clsses += " active";
         }
         // FIXME https://github.com/yahoo/react-intl/issues/189
         // use FormattedRelative when fixed, will have to upgrade to ReactIntlv2
-        return (<div className={clsses} onClick={this.loadArticle}>
+        return (<div className={clsses} onClick={this.loadArticle} title={this.props.title}>
                     <h5><strong>{title}</strong></h5>
                     <JarrTime text={this.props.date}
                               stamp={this.props.timestamp} />
-                    <div>{read} {liked} {newTab} {this.props.title}</div>
+                    <div>{read} {liked} {this.props.title}</div>
                 </div>
         );
     },
@@ -81,7 +78,7 @@ var TableLine = React.createClass({
         evnt.stopPropagation();
     },
     loadArticle: function() {
-        this.setState({active: true, read: true}, function() {
+        this.setState({selected: true, read: true}, function() {
             RightPanelActions.loadArticle(
                     this.props.article_id, this.props.read);
         }.bind(this));
@@ -232,7 +229,11 @@ var MiddlePanel = React.createClass({
         return (<Row className="show-grid">
                     <div className="list-group">
                     {this.state.articles.map(function(article){
-                        return (<TableLine key={"a" + article.article_id}
+                        var key = "a" + article.article_id;
+                        if(article.read) {key+="r";}
+                        if(article.liked) {key+="l";}
+                        if(article.selected) {key+="s";}
+                        return (<TableLine key={key}
                                         title={article.title}
                                         icon_url={article.icon_url}
                                         read={article.read}