Refactor feedback dialog for Buefy themes

for more proper Vue.js component usage pattern

tailbone/templates/themes/falafel/base.mako

@@ -106,7 +106,7 @@
         </div>
       </nav>
 
-      <nav class="level">
+      <nav class="level" style="margin: 0.5rem auto;">
         <div class="level-left">
 
           ## Current Context
@@ -180,18 +180,16 @@
               </div>
           % endif
 
-          ## Feedback Button
-          <div class="level-item" id="feedback-app">
-            <a class="button is-primary" @click="showFeedback()">
-              <span class="icon is-small">
-                <i class="fas fa-comment"></i>
-              </span>
-              <span>Feedback</span>
-            </a>
-          </div>
-
-          ## Feedback Dialog
+          ## Feedback Button / Dialog
+          ${h.javascript_link(request.static_url('tailbone:static/themes/falafel/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
           ${feedback_dialog()}
+          <div id="feedback-app">
+            <feedback-form action="${url('feedback')}">
+            </feedback-form>
+          </div>
+          <script type="text/javascript">
+            new Vue({el: '#feedback-app'})
+          </script>
 
         </div><!-- level-right -->
       </nav><!-- level -->
@@ -257,8 +255,6 @@
 
     </div><!-- content-wrapper -->
 
-    ${h.javascript_link(request.static_url('tailbone:static/themes/falafel/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
-
   </body>
 </html>