Rename filter-bar to sidebar for the greater good

source/sass/base/_layout.scss

@@ -15,7 +15,7 @@ body {
   height: 100%;
 }
 
-.filter-bar {
+.sidebar {
   flex: 1;
   min-width: 200px;
   max-width: 240px;

source/sass/objects/_sidebar.scss

@@ -1,8 +1,8 @@
-.filter-bar {
-  color: $filter-bar--foreground;
+.sidebar {
+  color: $sidebar--foreground;
 }
 
-.filter-bar {
+.sidebar {
 
   &__item {
 

source/sass/style.scss

@@ -17,7 +17,7 @@
 @import "objects/action-bar";
 @import "objects/client-stats";
 @import "objects/dropdown";
-@import "objects/filter-bar";
+@import "objects/sidebar";
 @import "objects/modals";
 @import "objects/progress-bar";
 @import "objects/status-filter";

source/sass/tools/_colors.scss

@@ -30,8 +30,8 @@ $action--background--hover: rgba(#333e4a, 0.05);
 $action--border--hover: rgba(#333e4a, 0.15);
 
 // filter bar
-$filter-bar--foreground: #626466;
-$filter-bar--border: #161316;
+$sidebar--foreground: #626466;
+$sidebar--border: #161316;
 
 $client-stats--primary: #333332;
 $client-stats--secondary: #999997;

source/scripts/components/sidebar/ClientStats.js

@@ -51,7 +51,7 @@ export default class ClientStats extends React.Component {
     let downloadTotal = format.data(this.state.clientStats.transferred.download);
 
     return (
-      <div className="client-stats filter-bar__item">
+      <div className="client-stats sidebar__item">
         <div className="client-stat client-stat--download">
           <span className="client-stat__icon">
             <Icon icon="download" />

source/scripts/components/sidebar/SearchBox.js

@@ -33,8 +33,8 @@ export default class SearchBox extends React.Component {
 
   render() {
     let classSet = classnames({
-      'filter-bar__item': true,
-      'filter-bar__item--search': true,
+      'sidebar__item': true,
+      'sidebar__item--search': true,
       'is-in-use': this.state.searchValue !== ''
     });
 

source/scripts/components/sidebar/StatusFilters.js

@@ -69,7 +69,7 @@ export default class StatusFilters extends React.Component {
     let filters = this.getFilters();
 
     return (
-      <ul className="status-filter filter-bar__item">
+      <ul className="status-filter sidebar__item">
         <li className="status-filter__item status-filter__item--heading">
           Filter by Status
         </li>

source/scripts/containers/Sidebar.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import ClientStats from '../components/filter-bar/ClientStats';
+import ClientStats from '../components/sidebar/ClientStats';
 import { setTorrentsFilter, setTorrentsSearch } from '../actions/UIActions';
-import StatusFilters from '../components/filter-bar/StatusFilters';
-import SearchBox from '../components/filter-bar/SearchBox';
+import StatusFilters from '../components/sidebar/StatusFilters';
+import SearchBox from '../components/sidebar/SearchBox';
 import UIActions from '../actions/UIActions';
 
 const methodsToBind = [
@@ -11,7 +11,7 @@ const methodsToBind = [
   'handleSearchChange'
 ];
 
-export default class FilterBar extends React.Component {
+export default class Sidebar extends React.Component {
 
   constructor() {
     super();
@@ -31,11 +31,11 @@ export default class FilterBar extends React.Component {
 
   render() {
     return (
-      <nav className="filter-bar">
+      <nav className="sidebar">
         <ClientStats />
         <SearchBox handleSearchChange={this.handleSearchChange} />
         <StatusFilters handleFilterChange={this.handleFilterChange}
-          activeFilter={this.props.uiStore.torrentList.filterBy} />
+          activeFilter={this.props.filterBy} />
       </nav>
     );
   }