tags: move tags stuff in tasks html out to filters.html, click the

tag on a task to apply tag

styles/app/filters.styl

@@ -12,4 +12,8 @@
 
 /* Filters applied to tasks */
 .task.filtered-out
-  display: none
+  display: none
+
+.tag-label:hover
+  background-color: #3a87ad
+  cursor: pointer

views/app/filters.html

@@ -30,4 +30,24 @@
           {/}
       </li>
     </ul>
-  </div>
+  </div>
+
+<applied-filters:>
+    <!-- There's a very strange bug where live-bound #each here loses model.at reference on _{type}List alter -->
+    {{#each _user.tags as :tag}}
+        <span>
+            {#if :task.tags[:tag.id]}
+                <span data-tag-id="{{:tag.id}}" x-bind="click:toggleFilterByTag" class="label tag-label {#if _user.filters[:tag.id]}label-info{/}">{:tag.name}</span>
+            {/}
+        </span>
+    {{/}}
+
+<filter-fieldgroup:>
+    <fieldset class='option-group'>
+        <legend class="option-title">Tags</legend>
+        <select multiple="multiple">
+            {{#each _user.tags as :tag}}
+                <option selected="{:task.tags[:tag.id]}">{:tag.name}</option>
+            {{/}}
+        </select>
+    </fieldset>

views/app/tasks.html

@@ -152,15 +152,7 @@
         <!-- main content -->
         <p class="task-text">
             {:task.text}
-
-            <!-- There's a very strange bug where live-bound #each here loses model.at reference on _{type}List alter -->
-            {{#each _user.tags as :tag}}
-                <span>
-                    {#if :task.tags[:tag.id]}
-                        <span class="label {#if _user.filters[:tag.id]}label-info{/}">{:tag.name}</span>
-                    {/}
-                </span>
-            {{/}}
+            <app:filters:applied-filters />
         </p>
 
         <!-- edit/options dialog -->
@@ -225,14 +217,7 @@
             {/}
 
 
-            <fieldset class='option-group'>
-                <legend class="option-title">Tags</legend>
-                <select multiple="multiple">
-                    {{#each _user.tags as :tag}}
-                        <option selected="{:task.tags[:tag.id]}">{:tag.name}</option>
-                    {{/}}
-                </select>
-            </fieldset>
+            <app:filters:filter-fieldgroup />
 
 
             <!-- Advanced Options -->