Added some realtime events to the app

* When a user gets a new shared message, it will popup instantly
* When a new website is scraped, it will update in real time
* Various other little bug fixes and improvements
* Sharing displays correct notes and handles shared notes correctly
* Tags were not displaying on notes, they do now. They better.

client/src/components/AnimatedCounterComponent.vue

@@ -0,0 +1,113 @@
+<style type="text/css" scoped>
+
+	.numtainer {
+		height: 1.1em;
+		font-size: 1em;
+		overflow: hidden;
+
+		display: inline-block;
+		box-sizing: border-box;
+	}
+	
+	.start-high {
+		color: #4dc86a;
+		animation: startHigh 0.5s forwards;
+	}
+
+	.start-low {
+		color: #4dc86a;
+		animation: startLow 0.5s forwards;
+	}
+
+	@keyframes startLow {
+		0% {
+			margin-top: 0;
+		}
+		100% {
+			margin-top: -1.2em;
+		}
+	}
+
+	@keyframes startHigh {
+		0% {
+			margin-top: -1.2em;
+		}
+		100% {
+			margin-top: 0;
+		}
+	}
+
+</style>
+
+<template>
+	<div class="numtainer">
+
+		<div v-if="animateUp">
+			<div class="start-high">{{ newNumber }}</div>
+			<div>{{ oldNumber }}</div>
+		</div>
+
+		<div v-if="animateDown">
+			<div class="start-low">{{ oldNumber }}</div>
+			<div>{{ newNumber }}</div>
+		</div>
+
+
+		<div v-if="totals">{{ totals[numberId] }}</div>
+	</div>
+</template>
+
+<script>
+
+	import { mapGetters } from 'vuex'
+
+	export default {
+		name: 'AnimatedCounterComponent',
+		props: [ 'numberId' ],
+		data () {
+			return {
+				oldNumber: 100,
+				newNumber: 99,
+				animateUp: false,
+				animateDown: false,
+			}
+		},
+		computed: {
+			...mapGetters(['totals'])
+		},
+		watch:{
+			totals(newVal, oldVal){
+				if(oldVal && newVal && newVal[this.numberId] != oldVal[this.numberId]){
+
+					console.log('New number ', newVal[this.numberId])
+
+					this.oldNumber = oldVal[this.numberId]
+					this.newNumber = newVal[this.numberId]
+
+					if(this.oldNumber > this.newNumber){
+						this.animateDown = true
+					} else {
+						this.animateUp = true
+					}
+					
+
+					setTimeout( () => {
+						this.animateUp = false
+						this.animateDown = false
+					}, 550)
+
+				}
+			}
+		},
+		beforeMount(){
+			
+		},
+		mounted(){
+		},
+		methods: {
+			onFileClick(file){
+
+			},
+		}
+	}
+</script>

client/src/components/GlobalSiteMenu.vue

@@ -21,7 +21,7 @@
 
 		.menu-item {
 			color: #fff;
-			padding: 0.8em 0px 0.8em 10px;
+			padding: 0.8em 10px 0.8em 10px;
 			display: inline-block;
 			width: 100%;
 			font-size: 1.15em;
@@ -154,7 +154,7 @@
 			<div class="menu-section" v-if="loggedIn">
 				<router-link exact-active-class="active" class="menu-item menu-button" to="/notes" v-on:click.native="emitReloadEvent()">
 					<i class="file outline icon"></i>Notes
-					<!-- <span v-if="$store.getters.totals">{{ $store.getters.totals['totalNotes'] }}</span> -->
+					<counter class="float-right" number-id="totalNotes" />
 				</router-link>
 				<div>
 					<!-- <div class="menu-item sub">Show Only <i class="caret down icon"></i></div> -->
@@ -167,7 +167,7 @@
 			<div class="menu-section" v-if="loggedIn && $store.getters.totals && $store.getters.totals['totalFiles']">
 				<router-link class="menu-item menu-button" exact-active-class="active" to="/attachments">
 					<i class="folder open outline icon"></i>Files
-					<!-- <span>{{ $store.getters.totals['totalFiles'] }}</span> -->
+					<counter class="float-right" number-id="totalFiles" />
 				</router-link>
 			</div>
 
@@ -216,6 +216,7 @@
 	export default {
 		components: {
 			'search-input': require('@/components/SearchInput.vue').default,
+			'counter':require('@/components/AnimatedCounterComponent.vue').default,
 		},
 		data: function(){ 
 			return {

client/src/components/NoteTitleDisplayCard.vue

@@ -15,6 +15,10 @@
 
 				<div class="sixteen wide column overflow-hidden note-card-text" @click="e => onClick(note.id, e)">
 
+					<div class="subtext" v-if="note.shareUsername">Shared by {{ note.shareUsername }}</div>
+					<div class="subtext" v-if="note.shared == 2">You Shared</div>
+
+
 					<!-- Title display  -->
 					<div v-if="note.title.length > 0" 
 						data-test-id="title"