apply FilePanel css and fix filtering

src/components/structures/FilePanel.js

@@ -55,6 +55,7 @@ var FilePanel = React.createClass({
 
             client.getOrCreateFilter("FILTER_FILES_" + client.credentials.userId, filter).then(
                 (filterId)=>{
+                    filter.filterId = filterId;
                     var timelineSet = this.state.room.getOrCreateFilteredTimelineSet(filter);
                     this.setState({ timelineSet: timelineSet });
                 },
@@ -93,6 +94,7 @@ var FilePanel = React.createClass({
         if (this.state.timelineSet) {
             return (
                 <TimelinePanel ref={this._gatherTimelinePanelRef}
+                    className="mx_FilePanel"
                     manageReadReceipts={false}
                     manageReadMarkers={false}
                     timelineSet={this.state.timelineSet}

src/components/structures/MessagePanel.js

@@ -73,6 +73,9 @@ module.exports = React.createClass({
 
         // opacity for dynamic UI fading effects
         opacity: React.PropTypes.number,
+
+        // className for the panel
+        className: React.PropTypes.string.isRequired,
     },
 
     componentWillMount: function() {
@@ -503,7 +506,7 @@ module.exports = React.createClass({
         style.opacity = this.props.opacity;
 
         return (
-            <ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel mx_fadable"
+            <ScrollPanel ref="scrollPanel" className={ this.props.className + " mx_fadable" }
                     onScroll={ this.props.onScroll }
                     onResize={ this.onResize }
                     onFillRequest={ this.props.onFillRequest }

src/components/structures/RoomView.js

@@ -1581,6 +1581,7 @@ module.exports = React.createClass({
                 onReadMarkerUpdated={ this._updateTopUnreadMessagesBar }
                 showUrlPreview = { this.state.showUrlPreview }
                 opacity={ this.props.opacity }
+                className="mx_RoomView_messagePanel"
             />);
 
         var topUnreadMessagesBar = null;

src/components/structures/TimelinePanel.js

@@ -90,6 +90,9 @@ var TimelinePanel = React.createClass({
 
         // maximum number of events to show in a timeline
         timelineCap: React.PropTypes.number,
+
+        // classname to use for the messagepanel
+        className: React.PropTypes.string.isRequired,
     },
 
     statics: {
@@ -827,7 +830,7 @@ var TimelinePanel = React.createClass({
 
         // if we're at the end of the live timeline, append the pending events
         if (!this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
-            events.push(... this.props.timelineSet.room.getPendingEvents());
+            events.push(... this.props.timelineSet.getPendingEvents());
         }
 
         return events;
@@ -941,7 +944,7 @@ var TimelinePanel = React.createClass({
         // exist.
         if (this.state.timelineLoading) {
             return (
-                    <div className="mx_RoomView_messagePanel mx_RoomView_messageListWrapper">
+                    <div className={ this.props.className + " mx_RoomView_messageListWrapper" }>
                         <Loader />
                     </div>
             );
@@ -973,6 +976,7 @@ var TimelinePanel = React.createClass({
                     onScroll={ this.onMessageListScroll }
                     onFillRequest={ this.onMessageListFillRequest }
                     opacity={ this.props.opacity }
+                    className={ this.props.className }
             />
         );
     },