* Tags Dropbown Beta...kinda crappy

client/src/pages/NotesPage.vue

@@ -29,6 +29,13 @@
 							<i class="green lock alternate icon"></i>Locked
 							<!-- <span>{{ $store.getters.totals['encryptedNotes'] }}</span> -->
 						</div>
+
+						<tag-display 
+							v-if="commonTags.length > 0" 
+							:tags="commonTags" 
+							:active-tags="searchTags"
+							v-on:tagClick="tagId => toggleTagFilter(tagId)"
+						/>
 						
 					</div>
 
@@ -58,16 +65,6 @@
 			<h2 v-if="fastFilters['onlyShowSharedNotes'] == 1">Shared Notes</h2>
 			<h2 v-if="fastFilters['onlyShowEncrypted'] == 1">Password Protected Notes</h2>
 
-			<!-- tags section  -->
-			<div v-if="commonTags.length > 0" class="sixteen wide column">
-				<h4 class="ui tiny dividing header"><i class="green tags icon"></i>Tags</h4>
-				<span v-for="tag in commonTags" @click="toggleTagFilter(tag.id)">
-					<span class="ui clickable basic label" :class="{ 'green':(searchTags.includes(tag.id)) }">
-					{{ucWords(tag.text)}} <span class="detail">{{tag.usages}}</span>
-					</span>
-				</span>
-			</div>
-
 			<!-- Note title card display  -->
 			<div class="sixteen wide column">
 
@@ -144,7 +141,8 @@
 			'fast-filters': require('@/components/FastFilters.vue').default,
 			'search-input': require('@/components/SearchInput.vue').default,
 			'attachment-display': require('@/components/AttachmentDisplayCard').default,
-			'counter':require('@/components/AnimatedCounterComponent.vue').default
+			'counter':require('@/components/AnimatedCounterComponent.vue').default,
+			'tag-display':require('@/components/TagDisplayComponent.vue').default,
 		},
 		data () {
 			return {
@@ -663,12 +661,6 @@
 				})
 
 			},
-			ucWords(str){
-				return (str + '')
-				.replace(/^(.)|\s+(.)/g, function ($1) {
-					return $1.toUpperCase()
-				})
-			},
 			reset(){
 				this.showClear = false
 				this.searchTerm = ''