From 2ae84ab73e84260218aa0d59aa5d3ccd9a3da6a2 Mon Sep 17 00:00:00 2001
From: Max G <admin@internet.com>
Date: Fri, 3 Jul 2020 03:25:38 +0000
Subject: [PATCH] Update * Added more version icons * Added working sign to
 notes when archived or tagged * Big sexy marketing update * Clicking Tags now
 opens them in their tag category

---
 client/src/components/GlobalSiteMenu.vue      |   2 +-
 .../src/components/NoteTitleDisplayCard.vue   |  17 +-
 client/src/pages/HomePage.vue                 | 280 ++++++++++++------
 client/src/pages/NotesPage.vue                |   1 +
 server/models/Note.js                         |   2 +-
 5 files changed, 204 insertions(+), 98 deletions(-)

diff --git a/client/src/components/GlobalSiteMenu.vue b/client/src/components/GlobalSiteMenu.vue
index d699082..1f2ff4e 100644
--- a/client/src/components/GlobalSiteMenu.vue
+++ b/client/src/components/GlobalSiteMenu.vue
@@ -385,7 +385,7 @@
 				location.reload(true)
 			},
 			getVersionIcon(){
-				const icons = ['cat','crow','dog','dove','dragon','fish','frog','hippo','horse','kiwi bird','otter','spider', 'smile', 'robot', 'hat wizard', 'microchip', 'atom', 'grin tongue squint', 'radiation']
+				const icons = ['cat','crow','dog','dove','dragon','fish','frog','hippo','horse','kiwi bird','otter','spider', 'smile', 'robot', 'hat wizard', 'microchip', 'atom', 'grin tongue squint', 'radiation', 'ghost', 'dna', 'burn', 'brain', 'moon', 'torii gate']
 				const index = ( parseInt(this.version.replace(/\./g,'')) % (icons.length))
 				return icons[index]
 
diff --git a/client/src/components/NoteTitleDisplayCard.vue b/client/src/components/NoteTitleDisplayCard.vue
index a011c0d..a527bdb 100644
--- a/client/src/components/NoteTitleDisplayCard.vue
+++ b/client/src/components/NoteTitleDisplayCard.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="note-title-display-card" 
 		:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
-		:class="{'currently-open':currentlyOpen, 'bgboy':triggerClosedAnimation, 'title-view':titleView }"
+		:class="{'currently-open':(currentlyOpen || showWorking), 'bgboy':triggerClosedAnimation, 'title-view':titleView }"
 	>
 
 
@@ -19,7 +19,7 @@
 					</span>
 				</span>
 
-				<span v-if="note.title == '' && note.subtext == '' && note.encrypted == 0">
+				<span v-if="note.title == '' && note.subtext == ''">
 					Empty Note
 				</span>
 
@@ -62,7 +62,7 @@
 				<div class="icon-bar">
 					
 					<span class="tags" v-if="note.tags">
-						<span  v-for="tag in (note.tags.split(','))" class="little-tag">{{ tag }}</span>
+						<span  v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">{{ tag.split(':')[0] }}</span>
 						<br>
 					</span>
 
@@ -177,14 +177,19 @@
 				this.$router.push('/attachments/note/'+this.note.id)
 			},
 			pinNote(){ //togglePinned() <- old name
+				this.showWorking = true
 				let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
 				axios.post('/api/note/setpinned', postData)
 				.then(data => {
+					this.showWorking = false
 					// this.$bus.$emit('update_single_note', this.note.id)
 				})
 				.catch(error => { this.$bus.$emit('notification', 'Failed to Pin Note') })
 			},
 			archiveNote(){ //toggleArchived() <- old name
+
+				this.showWorking = true
+
 				let postData = {'archived': !this.note.archived, 'noteId':this.note.id}
 				axios.post('/api/note/setarchived', postData)
 				.then(data => {
@@ -201,6 +206,9 @@
 				.catch(error => { this.$bus.$emit('notification', 'Failed to Archive Note') })
 			},
 			trashNote(){ //toggleArchived() <- old name
+
+				this.showWorking = true
+
 				let postData = {'trashed': !this.note.trashed, 'noteId':this.note.id}
 				axios.post('/api/note/settrashed', postData)
 				.then(data => {
@@ -256,6 +264,7 @@
 				beenClicked: false,
 				showTagSlideMenu: false,
 				triggerClosedAnimation: false, //Show just closed animation
+				showWorking: false
 			}
 		},
 		computed: {
@@ -524,7 +533,7 @@
 		height: calc(100% + 30px);
 	}
 	.currently-open:after {
-		content: 'Open';
+		content: '...';
 		position: absolute;
 		cursor: default;
 		top: 0;
diff --git a/client/src/pages/HomePage.vue b/client/src/pages/HomePage.vue
index 324a8c9..5d79cb9 100644
--- a/client/src/pages/HomePage.vue
+++ b/client/src/pages/HomePage.vue
@@ -77,13 +77,19 @@
 	}
 
 	.home-main img {
-		max-height: 400px !important;
+		max-height: 250px;
 	}
 	.white-link {
 		text-decoration: underline;
 		color: white;
 	}
 
+	@media only screen and (max-width: 740px) {
+		.column > img {
+			max-height: 125px;
+		}
+	}
+
 </style>
 
 <template>
@@ -92,27 +98,6 @@
 
 			<div class="row hero fadeBg" :style="{ 'height':(height+'px') }">
 
-				<!-- All marketing images if you need to review  -->
-				<div v-if="false" class="sixteen wide column">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/add.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/gardening.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/growth.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/icecream.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/investing.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/onboarding.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/robot.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/solution.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/watching.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/cloud.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/grandma.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/hamburger.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/idea.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/notebook.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/plan.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/secure.svg" alt="">
-					<img loading="lazy" width="10%" src="/api/static/assets/marketing/void.svg" alt="">
-				</div>
-
 				<!-- <div class="one wide large screen only column"></div> -->
 
 				<!-- desktop column - large screen only -->
@@ -136,6 +121,27 @@
 				
 			</div>
 
+			<!-- All marketing images if you need to review  -->
+				<div v-if="false" class="sixteen wide column">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/add.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/gardening.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/growth.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/icecream.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/investing.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/onboarding.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/robot.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/solution.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/watching.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/cloud.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/grandma.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/hamburger.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/idea.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/notebook.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/plan.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/secure.svg" alt="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/void.svg" alt="">
+				</div>
+
 			<!-- Go to notes button  -->
 			<div class="row" v-if="$parent.loggedIn">
 				<div class="sixteen wide middle algined center aligned column">
@@ -151,90 +157,171 @@
 					<div class="ui text container">
 						<h2>
 							<i class="plug icon"></i>
-							Sign Up Now - Only a Username and Password required</h2>
+							Sign Up Now - Only a Username and Password required
+						</h2>
 						<login-form :thin="true" />
 					</div>
 				</div>
 			</div>
 
-			<!-- set -->
+			<!-- Overview -->
 			<div class="middle aligned centered row">
-				<div class="six wide right aligned column">
-					<h2>Solid Scribe is a browser based note application that focuses on ease of use while keeping your data private</h2>
-					<h3>Tools to organize and collaborate on notes while maintaining security and respecting your privacy.</h3>
-				</div>
 				<div class="six wide column">
+					<h2>Solid Scribe focuses on powerful text editing and user privacy</h2>
+					<h3>Tools to organize and collaborate on thousands of notes while maintaining security and respecting your privacy.</h3>
+				</div>
+				<div class="four wide column">
 					<img loading="lazy" width="100%" src="/api/static/assets/marketing/idea.svg" alt="Explosion of New Ideas">
 				</div>
 			</div>
 
-			<div class="middle aligned centered green row">
-				<div class="six wide right aligned column">
+			<!-- features list -->
+			<div class="middle aligned centered row">
+				<div class="sixteen wide column">
+					<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Features</h1>
+				</div>
+				<div class="six wide column">
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey lock icon"></i> 
+								<i class="bottom left corner yellow key icon"></i> 
+							</i>
+							Privacy Focused
+							<div class="sub header">All note text is encrypted. No one can read your notes. None of your data is shared.</div>
+						</div>
+					</h2>
+
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey list icon"></i> 
+								<i class="bottom left corner green check icon"></i> 
+							</i>
+							To Do Lists
+							<div class="sub header">Create To Do lists that are always synced, work on mobile and can be sorted.</div>
+						</div>
+					</h2>
+
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey file icon"></i> 
+								<i class="bottom left corner blue pen icon"></i> 
+							</i>
+							Document Editing Tools
+							<div class="sub header">Bold, Underline, Title, Add Links, Add Tables Color Text, Color Background and more.</div>
+						</div>
+					</h2>
+
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey tags icon"></i> 
+								<i class="bottom left corner purple plus icon"></i> 
+							</i>
+							Tag Notes
+							<div class="sub header">Easily add and edit tags on notes then sort notes by tag.</div>
+						</div>
+					</h2>
+
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey images icon"></i> 
+								<i class="bottom left corner teal paperclip icon"></i> 
+							</i>
+							Add Images
+							<div class="sub header">Upload images to notes, add search text to the images to find them later.</div>
+						</div>
+					</h2>
+
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey cloud moon icon"></i> 
+								<i class="bottom left corner red eye icon"></i> 
+							</i>
+							Night Mode
+							<div class="sub header">Pure black night theme with an even darker flux theme.</div>
+						</div>
+					</h2>
+
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey share alternate icon"></i> 
+								<i class="bottom left corner share icon"></i> 
+							</i>
+							Share Encrypted Notes
+							<div class="sub header">Share notes with friends without compromising security. And its easy to disable sharing.</div>
+						</div>
+					</h2>
+
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey users icon"></i> 
+								<i class="bottom left corner olive exchange icon"></i> 
+							</i>
+							Collaborative Note Editing
+							<div class="sub header">Notes instantly update in real time everywhere the note is open.</div>
+						</div>
+					</h2>
+
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey search icon"></i> 
+								<i class="bottom left corner orange font icon"></i> 
+							</i>
+							Keyword Search
+							<div class="sub header">Easily search all notes. Encrypted search index ensures privacy and convenience.</div>
+						</div>
+					</h2>
+
+					<h2 class="ui dividing header">
+						<div class="content">
+							<i class="icons">
+								<i class="grey search icon"></i> 
+								<i class="bottom left corner pink paperclip icon"></i> 
+							</i>
+							Search Attachments
+							<div class="sub header">Add text to Images and links than can be searched.</div>
+						</div>
+					</h2>
+					
+				</div>
+				<div class="four wide column">
+					<img loading="lazy" width="100%" src="/api/static/assets/marketing/onboarding.svg" alt="">
+				</div>
+			</div>
+
+			
+			<div class="middle aligned centered row">
+				<div class="four wide right aligned column">
 					<img loading="lazy" width="100%" src="/api/static/assets/marketing/secure.svg" alt="marketing mumbo jumbo">
 					
 				</div>
 				<div class="six wide column">
-					<h2>All Note text is encrypted</h2>
-					<h3>Only you can read your notes. <a class="white-link" target="_blank" href="https://www.forbes.com/sites/zakdoffman/2019/01/30/facebook-has-just-been-caught-spying-on-users-private-messages-and-data-again/#1e27e00a31ce"> Employees can not snoop your account</a>. <a class="white-link" target="_blank" href="https://mashable.com/article/google-reading-your-emails-response/">No one can read your data for advertising</a>. Note text is completely unreadable without your password.</h3>
+					<h2>Only you can read your notes. </h2>
+					<h3>Employees can not <a target="_blank" href="https://www.forbes.com/sites/zakdoffman/2019/01/30/facebook-has-just-been-caught-spying-on-users-private-messages-and-data-again/#1e27e00a31ce"> snoop your account</a>. No one can <a target="_blank" href="https://mashable.com/article/google-reading-your-emails-response/">read your data for advertising</a>. Notes are completely unreadable without your password.</h3>
 				</div>
 			</div>
 
-			<!-- set -->
-			<div class="middle aligned centered row">
-				<div class="six wide column">
-					<h2>Organize your notes</h2>
-					<h3>Tag, Pin, Color, Archive, Attach Images, Share Encrypted Notes and Search</h3>
-				</div>
-				<div class="six wide column">
-					<img loading="lazy" width="100%" src="/api/static/assets/marketing/gardening.svg" alt="Pruning the mind garden">
-				</div>
-			</div>
-
-			<div class="middle aligned centered row">
-				<div class="six wide right aligned column">
-					<img loading="lazy" width="100%" src="/api/static/assets/marketing/cloud.svg" alt="Girl falling into the spiral of digital chaos">
-				</div>
+			<div class="middle aligned centered green row">
 				<div class="six wide column">
 					<h2>Extremely accessible - Nothing to install</h2>
 					<h3>Works on mobile or desktop browsers. <br>Behaves like an installed app on mobile phones.</h3>
 				</div>
-			</div>
-
-			<!-- set -->
-			<div class="middle aligned centered row">
-				<div class="six wide right aligned column">
-					<h2>Secure Search</h2>
-					<h3>Keyword search using an encrypted search index helps you find what you need without compromising security.</h3>
-				</div>
-				<div class="six wide column">
-					<img loading="lazy" width="100%" src="/api/static/assets/marketing/solution.svg" alt="Hypercube of Solutions">
+				<div class="four wide right aligned column">
+					<img loading="lazy" width="100%" src="/api/static/assets/marketing/cloud.svg" alt="Girl falling into the spiral of digital chaos">
 				</div>
 			</div>
 
 			<div class="middle aligned centered row">
-				<div class="six wide right aligned column">
-					<img loading="lazy" width="100%" src="/api/static/assets/marketing/plan.svg" alt="Scheme for planetary destruction">
-				</div>
-				<div class="six wide column">
-					<h2>Create Lists with Check Boxes</h2>
-					<h3>Todo lists are supported. With options to removed checked items, sort by completed and un-check all.</h3>
-				</div>
-			</div>
-
-			<!-- set -->
-			<div class="middle aligned centered row">
-				<div class="six wide right aligned column">
-					<h2>Powerful Text Editing</h2>
-					<h3>A plethora of editing tools are provided for coloring, underlining, bolding, attaching images and more.</h3>
-				</div>
-				<div class="six wide column">
-					<img loading="lazy" width="100%" src="/api/static/assets/marketing/growth.svg" alt="Endless progress at the cost of sanity and health">
-				</div>
-			</div>
-
-			<div class="middle aligned centered row">
-				<div class="six wide right aligned column">
-					<img loading="lazy" width="100%" src="/api/static/assets/marketing/onboarding.svg" alt="Shrunken man near giant tablet">
+				<div class="four wide right aligned column">
+					<img loading="lazy" width="100%" src="/api/static/assets/marketing/robot.svg" alt="Shrunken man near giant tablet">
 				</div>
 				<div class="six wide column">
 					<h2>Secure Data Sharing</h2>
@@ -242,17 +329,23 @@
 				</div>
 			</div>
 
+
 			<!-- set -->
-			<!-- <div class="middle aligned centered row">
-				<div class="six wide right aligned column">
-					<h2>Ice Cream</h2>
-					<h3>Get excited without all the screaming</h3>
-				</div>
+			<div class="middle aligned centered row">
 				<div class="six wide column">
+					<h2>Leave your Ad Blockers turned on</h2>
+					<h3>SolidScribe doesn't load any trackers or ads. It was designed to run on 
+					<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>, with 
+					<a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/" target="_blank">uBlock Origin</a> and a 
+					<a href="https://pi-hole.net/" target="_blank">Pi-hole</a> on the network.</h3>
+				</div>
+				<div class="four wide column">
 					<img loading="lazy" width="100%" src="/api/static/assets/marketing/icecream.svg" alt="Emergence of a 4th dimensional being perceived as a large ice cream ">
 				</div>
 			</div>
 
+			<!-- 
+
 			<div class="middle aligned centered row">
 				<div class="six wide right aligned column">
 					<img loading="lazy" width="100%" src="/api/static/assets/marketing/add.svg" alt="A shpere of newness">
@@ -291,17 +384,14 @@
 					<br>
 					<br>
 					<br>
-					<span class="ui button" v-on:click="showRealInformation">About</span>
 				</div>
 			</div>
 
-			<div v-if="realInformation" class="middle aligned centered row" ref="real">
+			<div v-if="true" class="middle aligned centered row">
 				<div class="six wide column">
-					<h2 class="ui center aligned">
-						Why Does this App exist? 
-					</h2>
+					<h2>Solid Scribe was created by one passionate developer</h2>
 					<p>
-						This App exists because I was tired of all my data being owned by big companies, having it farmed out for marketing, and leaving the contents of my life exposed to corporations.
+						I was tired of all my data being owned by big companies, having it farmed out for marketing, and leaving the contents of my life exposed to corporations.
 					</p>
 					<p>
 						If you want to give it a shot, feel free to make an account. There are no ads. None of this data is shared or public. I don't make any money.
@@ -309,7 +399,13 @@
 					<p>
 						If you see anything broken or want to see a feature implemented, I'm open to suggestions. <i class="thumbs up icon"></i>
 					</p>
-					<p>Generic Marketing Images - <a target="_blank" href="https://undraw.co/">https://unDraw.co/</a></p>
+					<p>If you want to help me out, I would love a small Bitcoin donation.</p>
+					<p>
+						<a href="https://btc3.trezor.io/address/3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG" target="_blank">
+							<img loading="lazy" width="160px" src="/api/static/assets/marketing/wallet.png" alt="3QYnnNKnYTcU82F8NJ1BrmzGU2zRndTyEG">
+						</a>
+					</p>
+					<p>Awesomely Generic Marketing Images - <a target="_blank" href="https://undraw.co/">https://unDraw.co/</a></p>
 				</div>
 				<div class="four wide column">
 					<img loading="lazy" width="100%" src="/api/static/assets/marketing/watching.svg" alt="Drinking the blood of the elderly">
diff --git a/client/src/pages/NotesPage.vue b/client/src/pages/NotesPage.vue
index 08855ef..598525b 100644
--- a/client/src/pages/NotesPage.vue
+++ b/client/src/pages/NotesPage.vue
@@ -111,6 +111,7 @@
 
 						<div class="note-card-display-area">
 							<note-title-display-card 
+								v-on:tagClick="tagId => toggleTagFilter(tagId)"
 								v-for="note in section"
 								:ref="'note-'+note.id"
 								:onClick="openNote"
diff --git a/server/models/Note.js b/server/models/Note.js
index f23f5e3..845a715 100644
--- a/server/models/Note.js
+++ b/server/models/Note.js
@@ -961,7 +961,7 @@ Note.search = (userId, searchQuery, searchTags, fastFilters, masterKey) => {
 					note.pinned,
 					note.archived,
 					note.trashed,
-					GROUP_CONCAT(DISTINCT tag.text) as tags,
+					GROUP_CONCAT(DISTINCT tag.text,":",tag.id) as tags,
 					GROUP_CONCAT(DISTINCT attachment.file_location) as thumbs,
 					shareUser.username as shareUsername,
 					note.shared,