* Tags Dropbown Beta...kinda crappy

client/src/components/TagDisplayComponent.vue

@@ -0,0 +1,109 @@
+<template>
+	<div class="ui basic button shrinking">
+
+
+		<!-- Dropdown Button -->
+		<span v-if="activeTags.length == 0" v-on:click="menuOpen = true">
+			<i class="green tags icon"></i>
+			Tags
+			<i class="caret down icon"></i>
+		</span>
+		<!-- Remove Tag button -->
+		<span v-if="activeTags.length > 0" v-on:click="toggleActive()">
+			<i class="green tag icon"></i>
+			{{ getActiveTag() }}
+			<i class="caret right icon"></i>
+		</span>
+
+		<!-- hidden dropdown menu -->
+		<div class="dropdown-menu" v-if="menuOpen">
+			<div class="ui raised segment">
+					<div class="ui clickable basic label" v-for="tag in tags">
+						<span v-on:click="onClick(tag.id)">
+								{{ ucWords(tag.text) }}
+								<span class="detail">{{tag.usages}}</span>
+							
+						</span>
+					</div>
+			</div>
+		</div>
+
+		<div class="shade" v-if="menuOpen" v-on:click="menuOpen = false"></div>
+		
+	</div>
+</template>
+
+<script>
+
+	export default {
+	name: 'TagDisplay',
+		props: [ 'tags', 'activeTags' ],
+		components: {
+		},
+		methods:{
+			toggleActive(){
+				this.menuOpen = false
+				const current = this.activeTags[0]
+				this.onClick( current )
+			},
+			onClick(tagId){
+				this.menuOpen = false
+				this.$emit('tagClick', tagId)
+			},
+			ucWords(str){
+				return (str + '')
+				.replace(/^(.)|\s+(.)/g, function ($1) {
+					return $1.toUpperCase()
+				})
+			},
+			getActiveTag(){
+				let text = 'Tags'
+
+				if(this.activeTags.length == 0){
+					return text
+				}
+
+				this.tags.forEach(tag => {
+					if( this.activeTags.includes(tag.id) ){
+						text = this.ucWords(tag.text)
+					}
+				})
+
+				return text
+			},
+		},
+		data () {
+			return {
+				menuOpen: false,
+			}
+		},
+		beforeMount(){
+
+		}
+	}
+</script>
+<style type="text/css">
+	.dropdown-menu {
+		position: absolute;
+		/*width: 70vw;*/
+		z-index: 1005;
+		left: 0;
+		right: 0;
+		max-width: 600px;
+		text-align: left;
+	}
+	.dropdown-menu .label {
+		margin: 0 5px 5px 0;
+	}
+	.shade {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 1004;
+		background-color: transparent;
+		width: 100vw;
+		height: 100vh;
+	}
+</style>

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 = ''