Basic styling, set up query params

assets/javascripts/discourse/components/knowledge-explorer-topic-list.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNames: "knowledge-explorer-topic-list"
+});

assets/javascripts/discourse/controllers/knowledge-explorer.js.es6

@@ -5,5 +5,11 @@ import {
 } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Controller.extend({
-  application: Ember.inject.controller()
+  application: Ember.inject.controller(),
+  queryParams: {
+    filterCategory: 'category',
+    filterTags: 'tags'
+  },
+  filterTags: null,
+  filterCategory: null,
 });

assets/javascripts/discourse/routes/knowledge-explorer.js.es6

@@ -7,7 +7,8 @@ export default Ember.Route.extend({
 
   setupController(controller, model) {
     controller.setProperties({
-      model: model
+      tags: model.tags,
+      topics: model.topics
     });
   }
 });

assets/javascripts/discourse/templates/knowledge-explorer.hbs

@@ -1,6 +1,8 @@
 <div class="knowledge-explorer">
+  <div class="knowledge-explorer-browse">
     {{knowledge-explorer-tags
-      tags=model.tags
+        tags=tags
         searchResults=searchResults}}
-  {{knowledge-explorer-topic-list topics=model.topics}}
+    {{knowledge-explorer-topic-list topics=topics}}
+  </div>
 </div>

assets/stylesheets/common/knowledge-explorer.scss

@@ -0,0 +1,46 @@
+.knowledge-explorer {
+ .knowledge-explorer-browse {
+   display: flex;
+   .knowledge-explorer-tags {
+     flex-basis: 25%;
+      padding: 10px 10px 10px 0;
+      a {
+        color: $primary;
+      }
+      .knowledge-explorer-tag {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        height: 30px;
+        padding-left: 10px;
+        .d-icon {
+          height: 1em;
+          &.d-icon-plus {
+            height: 0.75em;
+            margin-right: 0.25em;
+          }
+          &.d-icon-times-circle {
+            margin-left: 0.25em;
+          }
+        }
+        &:hover {
+          background: $highlight-medium;
+        }
+        &.selected:hover {
+          background: $danger-low;
+
+          .d-icon {
+            color: $danger;
+          }
+        }
+      }
+
+      .selected {
+        font-weight: bold;
+      }
+    }
+    .knowledge-explorer-topic-list {
+      flex-basis: 75%;
+    }
+ } 
+}