Add filter button

frontend/components/containers/annotation/FilterButton.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-menu>
+    <template v-slot:activator="{ on: menu }">
+      <v-tooltip bottom>
+        <template v-slot:activator="{ on: tooltip }">
+          <v-btn
+            class="text-capitalize ps-1 pe-1"
+            min-width="36"
+            outlined
+            v-on="{ ...tooltip, ...menu }"
+          >
+            <v-icon>
+              mdi-filter
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>Select a filter</span>
+      </v-tooltip>
+    </template>
+    <v-list>
+      <v-list-item-group v-model="selected">
+        <v-list-item
+          v-for="(item, i) in items"
+          :key="i"
+        >
+          <v-list-item-icon>
+            <v-icon v-if="selected === i">
+              mdi-check
+            </v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>
+              {{ item.title }}
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list-item-group>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: 0,
+      items: [
+        { title: 'All' },
+        { title: 'Done' },
+        { title: 'Undone' }
+      ]
+    }
+  }
+}
+</script>

frontend/components/containers/annotation/GuidelineButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="display:inline;">
     <v-tooltip bottom>
       <template v-slot:activator="{ on }">
         <v-btn

frontend/pages/projects/_id/sequence-labeling/index.vue

@@ -6,6 +6,7 @@
         class="d-none d-sm-flex"
       >
         <v-col>
+          <filter-button />
           <guideline-button />
         </v-col>
         <v-spacer />
@@ -38,6 +39,7 @@ import { mapGetters } from 'vuex'
 import EntityItemBox from '~/components/containers/annotation/EntityItemBox'
 import Paginator from '~/components/containers/annotation/Paginator'
 import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
+import FilterButton from '@/components/containers/annotation/FilterButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
 import BottomNavigator from '@/components/organisms/annotation/BottomNavigator'
 
@@ -49,6 +51,7 @@ export default {
   components: {
     BottomNavigator,
     EntityItemBox,
+    FilterButton,
     Paginator,
     GuidelineButton,
     MetadataBox