Commiting all changes for repo cleaning

I assume this is all the metric tracking changes.
Looks like some script changes as well.

.gitignore

@@ -7,3 +7,9 @@ pids
 *.seed
 *.pid.lock
 .env
+
+# exclude everything
+staticFiles/*
+
+# exception to the rule
+!staticFiles/assets/ 

applyProdDatabaseToDev.sh

@@ -0,0 +1,63 @@
+#!/bin/bash
+
+echo '-------'
+echo 'Starting Database Restore'
+echo '-------'
+
+#get Latest database backup
+
+# Unzip File
+# gzip -dk file.gz
+
+BACKUPDIR="/home/mab/databaseBackupSolidScribe"
+#DEVDBPASS="Crama!Lama*Jamma###88383!!!!!345345956245i"
+#DEVDBPASS="RootPass1234!"
+DEVDBPASS="ReallySecureRootPass123!"
+# LazaLinga&33Can't!Do!That34
+
+cd $BACKUPDIR
+
+# -t sort by modification time, newest first
+# -A --almost-all, do not list implied . and ..
+LASTZIPPEDFILE=$(ls -At *.gz | head -n1)
+
+# -k keep file after unzip
+# -d Decompress
+# -v verbose
+echo "Unzipping $LASTZIPPEDFILE"
+gunzip -dkv $LASTZIPPEDFILE
+
+BACKUPFILE=$(ls -At *.sql | head -n1)
+
+#Fix to replace incompatible DB type
+echo "Updating table name in -> $BACKUPFILE"
+#sed -i $BACKUPFILE -e 's/utf8mb4_0900_ai_ci/utf8mb4_unicode_ci/g'
+
+#Fix encoding for dev DB and exclude system tables
+sed -i 's/utf8mb4_0900_ai_ci/utf8mb4_general_ci/g' $BACKUPFILE
+sed -r '/INSERT INTO `(sys|mysql)`/d' $BACKUPFILE > $BACKUPFILE
+
+echo "Removing and syncing static files"
+rm -r /home/mab/ss/staticFiles/*
+rsync -e 'ssh -p 13328' -hazC --update mab@solidscribe.com:/home/mab/pi/staticFiles /home/mab/ss/
+
+echo "Updating Database"
+mysql -u root --password="$DEVDBPASS" < $BACKUPFILE
+
+## Optimize Database Tables
+# mysqlcheck --all-databases
+mysqlcheck --all-databases -o -u root --password="$DEVDBPASS" --silent
+# mysqlcheck --all-databases --auto-repair
+# mysqlcheck --all-databases --analyze
+
+# Fix an issues with DB after messing around with it
+mysql_upgrade -u root --password="$DEVDBPASS"
+
+#clean up extracted and modified SQL dumps
+rm *.sql
+
+
+
+echo '-------'
+echo "Applied Prod database to Dev. LastFile: $BACKUPFILE"
+echo '-------'

backupDatabase.sh

@@ -1,18 +1,31 @@
 #!/bin/bash
 
-BACKUPDIR="/home/mab/databaseBackupPi"
+# Take all variables in .env and turn them into local variables for this script
+source ~/.env
+
+BACKUPDIR="/home/mab/databaseBackupSolidScribe"
 
 mkdir -p $BACKUPDIR
 cd $BACKUPDIR
 
 NOW=$(date +"%Y-%m-%d_%H-%M")
-ssh mab@solidscribe.com -p 13328 "mysqldump --all-databases --user root -pRootPass1234!" > "backup-$NOW.sql"
+ssh mab@solidscribe.com -p 13328 "mysqldump --all-databases --single-transaction --user root -p$PROD_DB_PASS" > "backup-$NOW.sql"
+gzip "backup-$NOW.sql"
 
-cp "backup-$NOW.sql" "/mnt/Windows Data/DatabaseBackups/backup-$NOW.sql"
+# cp "backup-$NOW.sql" "/mnt/Windows Data/DatabaseBackups/backup-$NOW.sql"
 
 echo "Database Backup Complete on $NOW"
 
-#Restore DB
+## 
+# Restore DB
+##
+
 # copy file over, run restore
 # scp -P 13328 backup-2019-12-04_03-00.sql mab@avidhabit.com:/home/mab
 # mysql -u root -p < backup-2019-12-04_03-00.sql
+
+##
+# Crontab setup
+##
+
+# 0 2 * * * /bin/bash /home/mab/ss/backupDatabase.sh 1> /home/mab/databaseBackupLog.txt

client/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
-}

client/.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true

client/.gitignore

@@ -1,9 +1,20 @@
 .DS_Store
-node_modules/
-/dist/
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+*.pem
+*.crt
+*.key
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea
@@ -12,3 +23,4 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+*.sw?

client/.postcssrc.js

@@ -1,10 +0,0 @@
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  "plugins": {
-    "postcss-import": {},
-    "postcss-url": {},
-    // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {}
-  }
-}

client/README.md

@@ -1,21 +1,19 @@
-# client2
+# client
 
-> client2
-
-## Build Setup
-
-``` bash
-# install dependencies
+## Project setup
+```
 npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production with minification
-npm run build
-
-# build for production and view the bundle analyzer report
-npm run build --report
 ```
 
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

client/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

client/build/build.js

@@ -1,41 +0,0 @@
-'use strict'
-require('./check-versions')()
-
-process.env.NODE_ENV = 'production'
-
-const ora = require('ora')
-const rm = require('rimraf')
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const config = require('../config')
-const webpackConfig = require('./webpack.prod.conf')
-
-const spinner = ora('building for production...')
-spinner.start()
-
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, (err, stats) => {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(stats.toString({
-      colors: true,
-      modules: false,
-      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
-      chunks: false,
-      chunkModules: false
-    }) + '\n\n')
-
-    if (stats.hasErrors()) {
-      console.log(chalk.red('  Build failed with errors.\n'))
-      process.exit(1)
-    }
-
-    console.log(chalk.cyan('  Build complete.\n'))
-    console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
-})

client/build/check-versions.js

@@ -1,54 +0,0 @@
-'use strict'
-const chalk = require('chalk')
-const semver = require('semver')
-const packageConfig = require('../package.json')
-const shell = require('shelljs')
-
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
-}
-
-const versionRequirements = [
-  {
-    name: 'node',
-    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  }
-]
-
-if (shell.which('npm')) {
-  versionRequirements.push({
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  })
-}
-
-module.exports = function () {
-  const warnings = []
-
-  for (let i = 0; i < versionRequirements.length; i++) {
-    const mod = versionRequirements[i]
-
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
-      )
-    }
-  }
-
-  if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
-
-    for (let i = 0; i < warnings.length; i++) {
-      const warning = warnings[i]
-      console.log('  ' + warning)
-    }
-
-    console.log()
-    process.exit(1)
-  }
-}

client/build/utils.js

@@ -1,101 +0,0 @@
-'use strict'
-const path = require('path')
-const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const packageConfig = require('../package.json')
-
-exports.assetsPath = function (_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
-
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  const cssLoader = {
-    loader: 'css-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  const postcssLoader = {
-    loader: 'postcss-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
-
-    if (loader) {
-      loaders.push({
-        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
-    }
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
-  }
-
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
-    css: generateLoaders(),
-    postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  const output = []
-  const loaders = exports.cssLoaders(options)
-
-  for (const extension in loaders) {
-    const loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-
-  return output
-}
-
-exports.createNotifierCallback = () => {
-  const notifier = require('node-notifier')
-
-  return (severity, errors) => {
-    if (severity !== 'error') return
-
-    const error = errors[0]
-    const filename = error.file && error.file.split('!').pop()
-
-    notifier.notify({
-      title: packageConfig.name,
-      message: severity + ': ' + error.name,
-      subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
-    })
-  }
-}

client/build/vue-loader.conf.js

@@ -1,22 +0,0 @@
-'use strict'
-const utils = require('./utils')
-const config = require('../config')
-const isProduction = process.env.NODE_ENV === 'production'
-const sourceMapEnabled = isProduction
-  ? config.build.productionSourceMap
-  : config.dev.cssSourceMap
-
-module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: sourceMapEnabled,
-    extract: isProduction
-  }),
-  cssSourceMap: sourceMapEnabled,
-  cacheBusting: config.dev.cacheBusting,
-  transformToRequire: {
-    video: ['src', 'poster'],
-    source: 'src',
-    img: 'src',
-    image: 'xlink:href'
-  }
-}

client/build/webpack.base.conf.js

@@ -1,82 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const config = require('../config')
-const vueLoaderConfig = require('./vue-loader.conf')
-
-function resolve (dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-
-
-module.exports = {
-  context: path.resolve(__dirname, '../'),
-  entry: {
-    app: './src/main.js'
-  },
-  output: {
-    path: config.build.assetsRoot,
-    filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
-    }
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: vueLoaderConfig
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  },
-  node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
-    setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
-  }
-}

client/build/webpack.dev.conf.js

@@ -1,96 +0,0 @@
-'use strict'
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const path = require('path')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-const portfinder = require('portfinder')
-
-const HOST = process.env.HOST
-const PORT = process.env.PORT && Number(process.env.PORT)
-
-const devWebpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
-  },
-  // cheap-module-eval-source-map is faster for development
-  devtool: config.dev.devtool,
-
-  // these devServer options should be customized in /config/index.js
-  devServer: {
-    clientLogLevel: 'warning',
-    historyApiFallback: {
-      rewrites: [
-        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
-      ],
-    },
-    disableHostCheck: true,
-    hot: true,
-    contentBase: false, // since we use CopyWebpackPlugin.
-    compress: true,
-    host: HOST || config.dev.host,
-    port: PORT || config.dev.port,
-    open: config.dev.autoOpenBrowser,
-    overlay: config.dev.errorOverlay
-      ? { warnings: false, errors: true }
-      : false,
-    publicPath: config.dev.assetsPublicPath,
-    proxy: config.dev.proxyTable,
-    quiet: true, // necessary for FriendlyErrorsPlugin
-    watchOptions: {
-      poll: config.dev.poll,
-    }
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': require('../config/dev.env')
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true
-    }),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.dev.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ]
-})
-
-module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = process.env.PORT || config.dev.port
-  portfinder.getPort((err, port) => {
-    if (err) {
-      reject(err)
-    } else {
-      // publish the new Port, necessary for e2e tests
-      process.env.PORT = port
-      // add port to devServer config
-      devWebpackConfig.devServer.port = port
-
-      // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
-        },
-        onErrors: config.dev.notifyOnErrors
-        ? utils.createNotifierCallback()
-        : undefined
-      }))
-
-      resolve(devWebpackConfig)
-    }
-  })
-})

client/build/webpack.prod.conf.js

@@ -1,145 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-
-const env = require('../config/prod.env')
-
-const webpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true,
-      usePostCSS: true
-    })
-  },
-  devtool: config.build.productionSourceMap ? config.build.devtool : false,
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-  },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/en/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-          warnings: false
-        }
-      },
-      sourceMap: config.build.productionSourceMap,
-      parallel: true
-    }),
-    // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css'),
-      // Setting the following option to `false` will not extract CSS from codesplit chunks.
-      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
-      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-      allChunks: true,
-    }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: config.build.productionSourceMap
-        ? { safe: true, map: { inline: false } }
-        : { safe: true }
-    }),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: config.build.index,
-      template: 'index.html',
-      inject: true,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
-    }),
-    // keep module.id stable when vendor modules does not change
-    new webpack.HashedModuleIdsPlugin(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks (module) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      minChunks: Infinity
-    }),
-    // This instance extracts shared chunks from code splitted chunks and bundles them
-    // in a separate chunk, similar to the vendor chunk
-    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'app',
-      async: 'vendor-async',
-      children: true,
-      minChunks: 3
-    }),
-
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ]
-})
-
-if (config.build.productionGzip) {
-  const CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  )
-}
-
-if (config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-}
-
-module.exports = webpackConfig

client/config/dev.env.js

@@ -1,7 +0,0 @@
-'use strict'
-const merge = require('webpack-merge')
-const prodEnv = require('./prod.env')
-
-module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
-})

client/config/index.js

@@ -1,69 +0,0 @@
-'use strict'
-// Template version: 1.3.1
-// see http://vuejs-templates.github.io/webpack for documentation.
-
-const path = require('path')
-
-module.exports = {
-  dev: {
-
-    // Paths
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {},
-
-    // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
-    port: 8444, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: false,
-    errorOverlay: true,
-    notifyOnErrors: true,
-    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
-    
-    
-    /**
-     * Source Maps
-     */
-
-    // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-module-eval-source-map',
-
-    // If you have problems debugging vue-files in devtools,
-    // set this to false - it *may* help
-    // https://vue-loader.vuejs.org/en/options.html#cachebusting
-    cacheBusting: true,
-
-    cssSourceMap: true
-  },
-
-  build: {
-    // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
-
-    // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-
-    /**
-     * Source Maps
-     */
-
-    productionSourceMap: true,
-    // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
-
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
-
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
-  }
-}

client/config/prod.env.js

@@ -1,4 +0,0 @@
-'use strict'
-module.exports = {
-  NODE_ENV: '"production"'
-}

client/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

client/package.json

@@ -1,66 +1,32 @@
 {
-  "name": "client2",
-  "version": "1.0.0",
-  "description": "client2",
-  "author": "max",
+  "name": "solidscribe",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "start": "npm run dev",
-    "build": "node build/build.js"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
   },
   "dependencies": {
-    "axios": "^0.19.2",
+    "axios": "^1.1.3",
+    "core-js": "^3.6.5",
     "es6-promise": "^4.2.8",
-    "fomantic-ui-css": "^2.8.6",
-    "vue": "^2.5.2",
-    "vue-router": "^3.3.4",
+    "fomantic-ui-css": "^2.9.0",
+    "vue": "^2.6.11",
+    "vue-chartjs": "^5.0.1",
+    "vue-router": "^3.2.0",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
-    "chalk": "^2.0.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
-    "friendly-errors-webpack-plugin": "^1.6.1",
-    "html-webpack-plugin": "^2.30.1",
-    "node-notifier": "^5.1.2",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "ora": "^1.2.0",
-    "portfinder": "^1.0.26",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
-    "postcss-url": "^7.2.1",
-    "rimraf": "^2.6.0",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "uglifyjs-webpack-plugin": "^1.1.1",
-    "url-loader": "^0.5.8",
-    "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
-  },
-  "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-vuex": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not ie <= 8"
+    "not dead"
   ]
 }

client/public/index.html

@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
     <link rel="icon" href="/api/static/assets/favicon.ico" type="image/ico"/>
     <link rel="shortcut icon" href="/api/static/assets/favicon.ico" type="image/x-icon"/>
 
@@ -11,14 +12,20 @@
     <link rel="manifest" href="/api/static/assets/manifest.json">
 
     <title>Solid Scribe - An easy, encrypted Note App</title>
+    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
   </head>
   <body>
+    <noscript>
+      <strong>We're sorry but Solid Scribe doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
     <div id="app">
       <!-- placeholder data for scrapers with no JS -->
       <style>
         body {
           background-color: #212221;
           color: #aeaeae;
+          height: 100vh;
+          width: 100%;
         }
         .centered {
           position: fixed;
@@ -59,4 +66,4 @@
     </div>
     <!-- built files will be auto injected -->
   </body>
-</html>
+</html>

client/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

client/src/App.vue

@@ -60,6 +60,7 @@
 import axios from 'axios'
 
 export default {
+	name: 'App',
 	components: {
 		'global-site-menu': require('@/components/GlobalSiteMenu.vue').default,
 		'global-notification':require('@/components/GlobalNotificationComponent.vue').default,
@@ -199,6 +200,11 @@ export default {
 			this.blockUntilNextRequest = true
 		})
 
+		//Track users active sessions
+		this.$io.on('update_active_user_count', countData => {
+			this.$store.commit('setActiveSessions', countData)
+		})
+
 	},
 	computed: {
 		loggedIn () {

client/src/Helpers.js

@@ -53,7 +53,7 @@ helpers.timeAgo = (time) => {
 			if (typeof format[2] == 'string') {
 				return format[list_choice]
 			} else {
-				return Math.floor(seconds / format[2]) + ' ' + format[1]// + ' ' + token
+				return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token
 			}
 		}
 	}

client/src/assets/semantic-helper.css

@@ -3,7 +3,7 @@
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 400;
-	src: local('Roboto'), local('Roboto-Regular'), url(/api/static/assets/roboto-latin.woff2) format('woff2');
+	src: local('Roboto'), local('Roboto-Regular'), url(./roboto-latin.woff2) format('woff2');
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* latin */
@@ -11,10 +11,20 @@
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 700;
-	src: local('Roboto Bold'), local('Roboto-Bold'), url(/api/static/assets/roboto-latin-bold.woff2) format('woff2');
+	src: local('Roboto Bold'), local('Roboto-Bold'), url(./roboto-latin-bold.woff2) format('woff2');
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
-
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  min-width: 320px;
+  background: #FFFFFF;
+  font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 14px;
+  line-height: 1.4285em;
+  color: rgba(0, 0, 0, 0.87);
+}
 
 :root {
 
@@ -43,6 +53,7 @@ html {
 	height:100%;
 	padding: 0;
 	margin: 0;
+	background: var(--body_bg_color);
 }
 a:hover {
 	text-decoration: underline;
@@ -80,9 +91,12 @@ div.ui.basic.segment.no-fluf-segment {
 /* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
 body {
 	color: var(--text_color);
-	background-color: var(--body_bg_color);
+	background: none;
 	font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 }
+#app {
+	background: var(--body_bg_color);
+}
 
 .ui.segment {
 	color: var(--text_color);
@@ -132,6 +146,9 @@ body {
 .ui.dividing.header {
 	border-bottom-color: var(--dark_border_color);
 }
+.ui.dividing.header > .sub.header {
+	color: var(--dark_border_color);
+}
 .ui.icon.input > i.icon {
 	color: var(--text_color);
 }
@@ -160,9 +177,21 @@ div.ui.basic.green.label {
 	border-color: var(--dark_border_color) !important;
 }
 /*Overwrites for modifiable theme color */
-i.green.icon.icon.icon.icon {
+i.green.icon.icon.icon.icon, i.green.icon.icon.icon.icon.icon {
 	color: var(--main-accent);
 }
+.button {
+	box-shadow: 2px 2px 4px -2px rgba(40, 40, 40, 0.89) !important;
+	transition: all 0.9s ease;
+	position: relative;
+}
+.button:hover {
+	box-shadow: 3px 2px 3px -2px rgba(40, 40, 40, 0.95) !important;
+}
+.button:active {
+	transform: translateY(1px);
+}
+
 .ui.green.buttons, .ui.green.button, .ui.green.button:hover {
 	background-color: var(--main-accent);
 }
@@ -176,6 +205,9 @@ i.green.icon.icon.icon.icon {
 .ui.grid > .green.row, .ui.grid > .green.column, .ui.grid > .row > .green.column {
 	background-color: var(--main-accent);
 }
+.ui.green.header {
+	color: var(--main-accent);
+}
 
 /* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
 
@@ -280,7 +312,7 @@ i.green.icon.icon.icon.icon {
 		border: none;
 		/*height: calc(100% - 69px);*/
 
-		min-height: 500px;
+		min-height: 300px;
 		background-color: var(--small_element_bg_color);
 		/*margin-bottom: 15px;*/
 
@@ -299,6 +331,9 @@ i.green.icon.icon.icon.icon {
 		margin-left: auto;
 		margin-right: auto;
 		max-width: 1100px;
+
+		box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+
 	}
 	.squire-box::selection, 
 	.squire-box::-moz-selection {
@@ -320,9 +355,14 @@ i.green.icon.icon.icon.icon {
 		background-color: rgba(255, 255, 255, 0.2);
 	}
 
+	.note-card-text code, 
+	.squire-box code,
 	.note-card-text pre, 
 	.squire-box pre {
 		/*word-wrap: break-word;*/
+		display: inline-block;
+		border-left: 2px solid var(--main-accent);
+		padding-left: 15px;
 	}
 	.note-card-text p,
 	.squire-box p {
@@ -357,8 +397,37 @@ i.green.icon.icon.icon.icon {
 	.squire-box ol, 
 	.note-card-text ul,
 	.squire-box ul {
-		margin: 8px 0 0 0;
+		margin: 3px 0;
+		display: block;
 	}
+	/* Add border 1 indent level */
+	.note-card-text > ol > ol,
+	.squire-box > ol > ol,
+	.note-card-text > ul > ul,
+	.squire-box > ul > ul
+	{
+		border-left: 1px solid var(--border_color);
+	}
+	.note-card-text ol > ol,
+	.squire-box ol > ol,
+	.note-card-text ul > ul,
+	.squire-box ul > ul {
+		list-style-type: upper-alpha;
+	}
+
+
+ol {
+  counter-reset: item;
+}
+ol li {
+  display: block;
+}
+ol li:before {
+content: counters(item, ".") ".";
+counter-increment: item;
+padding-right: 10px;
+}
+
 	.note-card-text ul > li,
 	.squire-box ul > li {
 		position: relative;
@@ -485,10 +554,6 @@ i.green.icon.icon.icon.icon {
 	/* adjust checkboxes for mobile. Make them a little bigger, easier to click */
 	@media only screen and (max-width: 740px) {
 
-		.squire-box {
-			min-height: calc(100vh - 122px);
-		}
-
 		.ui.button.shrinking {
 			font-size: 0.85714286rem;
 			margin: 0 3px;
@@ -555,6 +620,10 @@ i.green.icon.icon.icon.icon {
 .ui.white.button {
 	background: #FFF;
 }
+.white.row {
+	background-color: rgba(255, 255, 255, 0.9);
+}
+
 .input-floating-button {
 	position: absolute;
 	top: 19px;
@@ -865,4 +934,60 @@ i.green.icon.icon.icon.icon {
 [data-position="right center"][data-tooltip]:after {
   -webkit-transform-origin: left center;
           transform-origin: left center;
-}
+}
+@media only screen and (max-width: 740px) {
+	/*hide tooltips on mobile*/
+	[data-tooltip]:hover:before,
+	[data-tooltip]:hover:after {
+	  visibility: visible;
+	  opacity: 0;
+	}
+}
+
+
+.glint:after {
+	
+	content: '';
+	position: absolute;
+
+	top: 0;
+	left: 0;
+	bottom: 0;
+
+	width: 100%;
+	opacity: 0;
+	pointer-events: none;
+	z-index: 1;
+
+	background: linear-gradient(
+		130deg, 
+		rgba(255,255,255,0) 45%,
+		rgba(255,255,255,1) 50%,
+		var(--main-accent) 55%,
+		rgba(255,255,255,0) 60% 
+	);
+
+	animation: glint-animation 0.8s linear 1;
+	animation-delay: 0.9s;
+}
+
+@keyframes glint-animation {
+  0% {
+    left: -100%;
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+.shade {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: rgba(0,0,0,0.7);
+	z-index: 1000;
+}

client/src/assets/squire.js

@@ -460,7 +460,6 @@ function fixContainer ( container, root ) {
     var doc = container.ownerDocument;
     var wrapper = null;
     var i, l, child, isBR;
-    var config = root.__squire__._config;
 
     for ( i = 0, l = children.length; i < l; i += 1 ) {
         child = children[i];
@@ -1266,7 +1265,9 @@ var keys = {
     37: 'left',
     39: 'right',
     46: 'delete',
+    191: '/',
     219: '[',
+    220: '\\',
     221: ']'
 };
 
@@ -1762,7 +1763,7 @@ var keyHandlers = {
         }
     },
     space: function ( self, _, range ) {
-        var node, parent;
+        var node;
         var root = self._root;
         self._recordUndoState( range );
         if ( self._config.addLinks ) {
@@ -2116,7 +2117,7 @@ var cleanTree = function cleanTree ( node, config, preserveWS ) {
                             break;
                         }
                     }
-                    data = data.replace( /^[ \t\r\n]+/g, sibling ? ' ' : '' );
+                    data = data.replace( /^[ \r\n]+/g, sibling ? ' ' : '' );
                 }
                 if ( endsWithWS ) {
                     walker.currentNode = child;
@@ -2131,7 +2132,7 @@ var cleanTree = function cleanTree ( node, config, preserveWS ) {
                             break;
                         }
                     }
-                    data = data.replace( /[ \t\r\n]+$/g, sibling ? ' ' : '' );
+                    data = data.replace( /[ \r\n]+$/g, sibling ? ' ' : '' );
                 }
                 if ( data ) {
                     child.data = data;
@@ -2225,26 +2226,35 @@ var cleanupBRs = function ( node, root, keepForBlankLine ) {
 // The (non-standard but supported enough) innerText property is based on the
 // render tree in Firefox and possibly other browsers, so we must insert the
 // DOM node into the document to ensure the text part is correct.
-var setClipboardData = function ( clipboardData, node, root, config ) {
-    var body = node.ownerDocument.body;
-    var willCutCopy = config.willCutCopy;
+var setClipboardData =
+        function ( event, contents, root, willCutCopy, toPlainText, plainTextOnly ) {
+    var clipboardData = event.clipboardData;
+    var doc = event.target.ownerDocument;
+    var body = doc.body;
+    var node = createElement( doc, 'div' );
     var html, text;
 
-    // Firefox will add an extra new line for BRs at the end of block when
-    // calculating innerText, even though they don't actually affect display.
-    // So we need to remove them first.
-    cleanupBRs( node, root, true );
+    node.appendChild( contents );
 
-    node.setAttribute( 'style',
-        'position:fixed;overflow:hidden;bottom:100%;right:100%;' );
-    body.appendChild( node );
     html = node.innerHTML;
-    text = node.innerText || node.textContent;
-
     if ( willCutCopy ) {
         html = willCutCopy( html );
     }
 
+    if ( toPlainText ) {
+        text = toPlainText( html );
+    } else {
+        // Firefox will add an extra new line for BRs at the end of block when
+        // calculating innerText, even though they don't actually affect
+        // display, so we need to remove them first.
+        cleanupBRs( node, root, true );
+        node.setAttribute( 'style',
+            'position:fixed;overflow:hidden;bottom:100%;right:100%;' );
+        body.appendChild( node );
+        text = node.innerText || node.textContent;
+        text = text.replace( / /g, ' ' ); // Replace nbsp with regular space
+        body.removeChild( node );
+    }
     // Firefox (and others?) returns unix line endings (\n) even on Windows.
     // If on Windows, normalise to \r\n, since Notepad and some other crappy
     // apps do not understand just \n.
@@ -2252,18 +2262,18 @@ var setClipboardData = function ( clipboardData, node, root, config ) {
         text = text.replace( /\r?\n/g, '\r\n' );
     }
 
-    clipboardData.setData( 'text/html', html );
+    if ( !plainTextOnly && text !== html ) {
+        clipboardData.setData( 'text/html', html );
+    }
     clipboardData.setData( 'text/plain', text );
-
-    body.removeChild( node );
+    event.preventDefault();
 };
 
 var onCut = function ( event ) {
-    var clipboardData = event.clipboardData;
     var range = this.getSelection();
     var root = this._root;
     var self = this;
-    var startBlock, endBlock, copyRoot, contents, parent, newContents, node;
+    var startBlock, endBlock, copyRoot, contents, parent, newContents;
 
     // Nothing to do
     if ( range.collapsed ) {
@@ -2275,7 +2285,7 @@ var onCut = function ( event ) {
     this.saveUndoState( range );
 
     // Edge only seems to support setting plain text as of 2016-03-11.
-    if ( !isEdge && clipboardData ) {
+    if ( !isEdge && event.clipboardData ) {
         // Clipboard content should include all parents within block, or all
         // parents up to root if selection across blocks
         startBlock = getStartBlockOfRange( range, root );
@@ -2295,10 +2305,8 @@ var onCut = function ( event ) {
             parent = parent.parentNode;
         }
         // Set clipboard data
-        node = this.createElement( 'div' );
-        node.appendChild( contents );
-        setClipboardData( clipboardData, node, root, this._config );
-        event.preventDefault();
+        setClipboardData(
+            event, contents, root, this._config.willCutCopy, null, false );
     } else {
         setTimeout( function () {
             try {
@@ -2313,14 +2321,10 @@ var onCut = function ( event ) {
     this.setSelection( range );
 };
 
-var onCopy = function ( event ) {
-    var clipboardData = event.clipboardData;
-    var range = this.getSelection();
-    var root = this._root;
-    var startBlock, endBlock, copyRoot, contents, parent, newContents, node;
-
+var _onCopy = function ( event, range, root, willCutCopy, toPlainText, plainTextOnly ) {
+    var startBlock, endBlock, copyRoot, contents, parent, newContents;
     // Edge only seems to support setting plain text as of 2016-03-11.
-    if ( !isEdge && clipboardData ) {
+    if ( !isEdge && event.clipboardData ) {
         // Clipboard content should include all parents within block, or all
         // parents up to root if selection across blocks
         startBlock = getStartBlockOfRange( range, root );
@@ -2345,13 +2349,21 @@ var onCopy = function ( event ) {
             parent = parent.parentNode;
         }
         // Set clipboard data
-        node = this.createElement( 'div' );
-        node.appendChild( contents );
-        setClipboardData( clipboardData, node, root, this._config );
-        event.preventDefault();
+        setClipboardData( event, contents, root, willCutCopy, toPlainText, plainTextOnly );
     }
 };
 
+var onCopy = function ( event ) {
+    _onCopy(
+        event,
+        this.getSelection(),
+        this._root,
+        this._config.willCutCopy,
+        null,
+        false
+    );
+};
+
 // Need to monitor for shift key like this, as event.shiftKey is not available
 // in paste event.
 function monitorShiftKey ( event ) {
@@ -2681,7 +2693,8 @@ var sanitizeToDOMFragment = function ( html, isPaste, self ) {
         ALLOW_UNKNOWN_PROTOCOLS: true,
         WHOLE_DOCUMENT: false,
         RETURN_DOM: true,
-        RETURN_DOM_FRAGMENT: true
+        RETURN_DOM_FRAGMENT: true,
+        FORCE_BODY: false
     }) : null;
     return frag ? doc.importNode( frag, true ) : doc.createDocumentFragment();
 };
@@ -2965,16 +2978,6 @@ proto.setSelection = function ( range ) {
         // needing restore on focus.
         if ( !this._isFocused ) {
             enableRestoreSelection.call( this );
-        } else if ( isAndroid && !this._restoreSelection ) {
-            // Android closes the keyboard on removeAllRanges() and doesn't
-            // open it again when addRange() is called, sigh.
-            // Since Android doesn't trigger a focus event in setSelection(),
-            // use a blur/focus dance to work around this by letting the
-            // selection be restored on focus.
-            // Need to check for !this._restoreSelection to avoid infinite loop
-            enableRestoreSelection.call( this );
-            this.blur();
-            this.focus();
         } else {
             // iOS bug: if you don't focus the iframe before setting the
             // selection, you can end up in a state where you type but the input
@@ -2984,7 +2987,15 @@ proto.setSelection = function ( range ) {
                 this._win.focus();
             }
             var sel = getWindowSelection( this );
-            if ( sel ) {
+            if ( sel && sel.setBaseAndExtent ) {
+                sel.setBaseAndExtent(
+                    range.startContainer,
+                    range.startOffset,
+                    range.endContainer,
+                    range.endOffset,
+                );
+            } else if ( sel ) {
+                // This is just for IE11
                 sel.removeAllRanges();
                 sel.addRange( range );
             }
@@ -3160,7 +3171,7 @@ proto._updatePath = function ( range, force ) {
 // selectionchange is fired synchronously in IE when removing current selection
 // and when setting new selection; keyup/mouseup may have processing we want
 // to do first. Either way, send to next event loop.
-proto._updatePathOnEvent = function ( event ) {
+proto._updatePathOnEvent = function () {
     var self = this;
     if ( self._isFocused && !self._willUpdatePath ) {
         self._willUpdatePath = true;
@@ -3880,10 +3891,9 @@ var increaseBlockQuoteLevel = function ( frag ) {
 };
 
 var decreaseBlockQuoteLevel = function ( frag ) {
-    var root = this._root;
     var blockquotes = frag.querySelectorAll( 'blockquote' );
     Array.prototype.filter.call( blockquotes, function ( el ) {
-        return !getNearest( el.parentNode, root, 'BLOCKQUOTE' );
+        return !getNearest( el.parentNode, frag, 'BLOCKQUOTE' );
     }).forEach( function ( el ) {
         replaceWith( el, empty( el ) );
     });
@@ -4164,7 +4174,14 @@ proto._getHTML = function () {
 proto._setHTML = function ( html ) {
     var root = this._root;
     var node = root;
-    node.innerHTML = html;
+    var sanitizeToDOMFragment = this._config.sanitizeToDOMFragment;
+    if ( typeof sanitizeToDOMFragment === 'function' ) {
+        var frag = sanitizeToDOMFragment( html, false, this );
+        empty( node );
+        node.appendChild( frag );
+    } else {
+        node.innerHTML = html;
+    }
     do {
         fixCursor( node, root );
     } while ( node = getNextBlock( node, root ) );
@@ -4172,8 +4189,7 @@ proto._setHTML = function ( html ) {
 };
 
 proto.getHTML = function ( withBookMark ) {
-    var brs = [],
-        root, node, fixer, html, l, range;
+    var html, range;
     if ( withBookMark && ( range = this.getSelection() ) ) {
         this._saveRangeToBookmark( range );
     }
@@ -4968,6 +4984,7 @@ Squire.rangeDoesEndAtBlockBoundary = rangeDoesEndAtBlockBoundary;
 Squire.expandRangeToBlockBoundaries = expandRangeToBlockBoundaries;
 
 // Clipboard.js exports
+Squire.onCopy = _onCopy;
 Squire.onPaste = onPaste;
 
 // Editor.js exports

client/src/components/AttachmentDisplayCard.vue

@@ -20,7 +20,7 @@
 		.image-placeholder {
 			width: 100%;
 			height: 100%;
-			max-height: 100px;
+			max-height: 75px;
 		}
 		.image-placeholder:after {
 			content: 'No Image';
@@ -89,7 +89,14 @@
 			<!-- image and text -->
 			<div class="six wide center aligned middle aligned column">
 				<a :href="linkUrl" target="_blank" >
-					<img v-if="item.file_location" class="attachment-image" :src="`/api/static/thumb_${item.file_location}`">
+					<img v-if="item.file_location" class="attachment-image" 
+						onerror="
+							this.onerror=null;
+							this.src='/api/static/assets/marketing/void.svg';
+							this.classList.add('image-placeholder');
+							this.insertAdjacentText('afterend', 'Image not found');
+						"
+						:src="`/api/static/thumb_${item.file_location}`">
 					<span v-else>
 						<img class="image-placeholder" loading="lazy" src="/api/static/assets/marketing/void.svg">
 						No Image
@@ -171,6 +178,9 @@
 				this.checkKeyup()
 			})
 		},
+		updated: function(){
+			this.checkKeyup()
+		},
 		methods: {
 			checkKeyup(){
 				let elm = this.$refs.edit

client/src/components/ColorPicker.vue

@@ -1,54 +1,59 @@
 <template>
 		
 	
-	<div :style="{ 'background-color':allStyles['noteBackground'], 'color':allStyles['noteText']}">
-		<div class="ui basic segment">
+	<div>
+		
 		<div class="ui grid">
 
-			<div class="ui sixteen wide center aligned column">
-				<div class="ui fluid button" v-on:click="clearStyles">
+			<div class="ui sixteen wide column">
+				<div class="ui dividing header">
+					Reset Background Color and Icon
+				</div>
+				<div class="ui labeled basic icon button" v-on:click="clearStyles">
 					<i class="refresh icon"></i>
-					Clear All Styles
+					Reset
 				</div>
 			</div>
 
-			<div class="row">
-				<div class="sixteen wide column">
-					<br>
-					<p>Note Color</p>
-					<div v-for="color in colors" 
-						class="color-button" 
-						:style="{ backgroundColor:color }"
-						v-on:click="chosenColor(color)"
-					></div>
+			<div class="sixteen wide column rounded" :style="{ 'background-color':allStyles['noteBackground'], 'color':allStyles['noteText']}">
+				<div class="ui dividing header" :style="{ 'color':allStyles['noteText']}">
+					<i class="fill drip icon"></i>
+					Background Color
+				</div>
+				<div v-for="color in colors" 
+					class="color-button" 
+					:style="{ backgroundColor:color }"
+					v-on:click="chosenColor(color)"
+				></div>
+			</div>
+
+			<div class="sixteen wide column">
+				<div class="ui dividing header">
+					<span v-if="allStyles.noteIcon" >
+						<i :class="`large ${allStyles.noteIcon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
+					</span>
+					Note Icon
+				</div>
+				<div v-for="icon in icons" class="icon-button" v-on:click="chosenIcon(icon)" >
+					<i :class="`large ${icon} icon`"></i>		
 				</div>
 			</div>
 
-			<div class="row">
-				<div class="sixteen wide column">
-					<p>Note Icon
-						<span v-if="allStyles.noteIcon" >
-							<i :class="`large ${allStyles.noteIcon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
-						</span>
-					</p>
-					<div v-for="icon in icons" class="icon-button" v-on:click="chosenIcon(icon)" >
-						<i :class="`large ${icon} icon`" :style="{ 'color':allStyles.iconColor }"></i>		
-					</div>
+			<div class="sixteen wide column">
+				<div class="ui dividing header">
+					<span v-if="allStyles.noteIcon" >
+						<i :class="`large ${allStyles.noteIcon} icon`" :style="{ 'color':allStyles.iconColor }"></i>
+					</span>
+					Icon Color
+				</div>
+				<div v-for="color in getReducedColors()" 
+					class="color-button" 
+					:style="{ backgroundColor:color }"
+					v-on:click="chooseIconColor(color)"
+				>
 				</div>
 			</div>
-
-			<div class="row">
-				<div class="sixteen wide column">
-					<p>Icon Color</p>
-					<div v-for="color in getReducedColors()" 
-						class="color-button" 
-						:style="{ backgroundColor:color }"
-						v-on:click="chooseIconColor(color)"
-					>
-					</div>
-				</div>
-			</div>
-		</div>
+		
 		</div>
 		
 	</div>
@@ -147,20 +152,24 @@
 	}
 </script>
 <style type="text/css" scoped>
-	.icon-button {
+	.icon-button, .color-button {
 		height: 40px;
-		width: calc(10% - 7px);
+		width: calc(15% - 1px);
 		display: inline-block;
 		cursor: pointer;
 		font-size: 1.3em;
+		border: 1px solid grey;
+		text-align: center;
+		padding: 5px 0px 0 0;
+		border-radius: 4px;
+		box-shadow: 0px 1px 3px 0px #3e3e3e;
+		margin: 2px 2px 0 0;
+		box-sizing: border-box;
 	}
 	.color-button {
-		display: inline-block;
-		width: calc(10% - 7px);
-		height: 30px;
-		border-radius: 30px;
-		box-shadow: 0px 1px 3px 0px #3e3e3e;
-		margin: 7px 7px 0 0;
-		cursor: pointer;
+		width: calc(10% - 4px);
+	}
+	.rounded {
+		border-radius: 5px;
 	}
 </style>

client/src/components/GlobalNotificationComponent.vue

@@ -19,7 +19,7 @@
 		padding: 1em 5px;
 		cursor: pointer;
 	}
-	.popup-row > span {
+	.popup-row > p {
 		/*width: calc(100% - 50px);*/
 		display: inline-block;
 		text-align: left;
@@ -85,6 +85,18 @@
 		animation: progressBar 3s linear;
 		animation-fill-mode: both;
 	}
+	.time-display {
+		display: inline-block;
+		width: calc(100% - 25px);
+		/*text-align: right;*/
+		color: white;
+		font-size: 0.7em;
+		margin: 0 0 0 25px;
+	}
+	.text-display {
+		display: inline-block;
+		width: 100%;
+	}
 
 	@keyframes progressBar {
 		0% { width: 0; }
@@ -101,7 +113,11 @@
 			<div class="meter">
 				<span><span class="progress"></span></span>
 			</div>
-			<span><i class="small info circle icon"></i>{{ item }}</span>
+			<p class="text-display">
+				<i class="small info circle icon"></i>
+				{{ item.text }}
+				<span class="time-display">{{ item.time }}</span>
+			</p>
 		</div>
 	</div>
 </template>
@@ -119,8 +135,8 @@
 			}
 		},
 		beforeMount(){
-			this.$bus.$on('notification', info => {
-				this.displayNotification(info)
+			this.$bus.$on('notification', notificationText => {
+				this.displayNotification(notificationText)
 			})
 		},
 		mounted(){
@@ -131,8 +147,17 @@
 
 		},
 		methods: {
-			displayNotification(newNotification){
-				this.notifications.push(newNotification)
+			displayNotification(notificationText){
+
+				const date = new Date()
+				const time = date.toLocaleTimeString()
+
+				const notification = {
+					text: notificationText,
+					time: time
+				}
+
+				this.notifications.unshift(notification)
 				clearTimeout(this.totalTimeout)
 				this.totalTimeout = setTimeout(() => {
 					this.dismiss()

client/src/components/GlobalSiteMenu.vue

@@ -1,26 +1,28 @@
 <style scoped>
 	.slotholder {
 		height: 100vh;
-		width: 155px;
+		width: 180px;
 		display: block;
 		float: left;
+		overflow: hidden;
 	}
 	.global-menu {
-		width: 155px;
+		width: 180px;
+		/* background: #221f2b; */
 		background: #221f2b;
 		margin: 0;
 		padding: 0;
 		box-sizing: border-box;
 		display: block;
 		position: fixed;
-		z-index: 111;
+		z-index: 900;
 		top: 0;
 		left: 0;
 		bottom: 0;
 	}
 	.menu-logo-display {
 		width: 27px;
-		margin: 5px 0 0 41px;
+		margin: 5px 0 0 55px;
 		display: inline-block;
 		height: auto;
 	}
@@ -42,7 +44,8 @@
 
 		.menu-section {}
 		.menu-section + .menu-section {
-			border-top: 1px solid #534c68;
+			/* border-top: 1px solid #534c68; */
+			border-top: 1px solid #534c68e3;
 		}
 		.menu-button {
 			cursor: pointer;
@@ -52,9 +55,6 @@
 			text-decoration: none;
 		}
 
-		.router-link-active i {
-			/*color: #16ab39;*/
-		}
 		.router-link-active {
 			background-color: #534c68;
 		}
@@ -66,28 +66,32 @@
 			right: 0;
 			bottom: 0;
 			background-color: rgba(0,0,0,0.7);
-			z-index: 100;
+			z-index: 899;
 			cursor: pointer;
 		}
 		.top-menu-bar {
 			/*color: var(--text_color);*/
 			/*width: 100%;*/
 			position: fixed;
-			top: 0;
+			bottom: 0;
 			left: 0;
 			right: 0;
 			z-index: 999;
 			background-color: var(--small_element_bg_color);
-			border-bottom: 1px solid;
-  			border-color: var(--border_color);
   			/*padding: 5px 1rem 5px;*/
   			display: flex;
 			justify-content: space-around;
 			width: 100vw;
+			border-top: 1px solid var(--dark_border_color);
+			display: flex;
+
+			margin: 0;
+			padding: 0;
 		}
 		.place-holder {
 			width: 100%;
-			height: 40px;
+			/*height: 40px;*/
+			height: 0;
 		}
 		.logo-display {
 			width: 27px;
@@ -103,19 +107,49 @@
 			text-align: center;
 			color: #8c80ae;
 			cursor: pointer;
+			background-color: var(--menu-background);
 		}
 
 		.mobile-button {
-			display: inline-block;
-			font-size: 2em;
-			padding: 6px 3px 5px;
+			padding: 5px 0 0;
+			margin: 0;
 			cursor: pointer;
+			font-size: 0.6em;
+			color: var(--menu-text);
+			text-align: center;
+			flex-basis: 100%;
+			line-height: 1.8em;
+		}
+		.mobile-button + .mobile-button {
+			border-left: 1px solid var(--dark_border_color);
+		}
+		.mobile-button i {
+			font-size: 2em;
+			margin: 0 auto;
+			padding: 0;
+			width: 100%;
+		}
+		.mobile-button svg {
+			margin: 0 46% 0;
+			display: inline-block;
+			width: 15px;
+		}
+		.mobile-button:active, .mobile-button:focus, .mobile-button:hover {
+			text-decoration: none;
 		}
 		.mobile-button.active {
 			background-color: transparent;
 		}
-		.mobile-button i {
-			margin: 0;
+		.single-line-text {
+			width: calc(100%);
+			/*margin: 5px 10px;*/
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: inline-block;
+		}
+		.faded {
+			color: var(--dark_border_color);
 		}
 
 </style>
@@ -128,11 +162,23 @@
 		<!-- collapsed menu, appears as a bar  -->
 		<div class="top-menu-bar" v-if="(collapsed || mobile) && !menuOpen">
 
-			<div class="mobile-button">
-				<i class="green link bars icon" v-on:click="collapseMenu"></i>
-			</div>
+			<!-- logo -->
+			<router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/notes" v-on:click.native="emitReloadEvent()">
+				<logo class="logo-display" color="var(--main-accent)" />
+				Notes
+			</router-link>
 
-			<div class="mobile-button"></div>
+			<!-- new note -->
+			<div v-if="loggedIn" class="mobile-button">
+				<span v-if="!disableNewNote" @click="createNote">
+					<i class="green plus icon"></i>
+					New Note
+				</span>
+				<span v-if="disableNewNote">
+					<i class="grey plus icon"></i>
+					Working
+				</span>
+			</div>
 
 			<!-- open straight to note -->
 			<router-link 
@@ -141,6 +187,7 @@
 				class="mobile-button"
 				:to="`/notes/open/${$store.getters.totals['quickNote']}`">
 				<i class="green sticky note outline icon"></i>
+				Scratch Pad
 			</router-link>
 			
 			<!-- create new and redirect to new note id -->
@@ -150,27 +197,21 @@
 				exact-active-class="active" 
 				class="mobile-button">
 				<i class="green sticky note outline icon"></i>
+				Scratch Pad
 			</a>
 
-			<router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/notes" v-on:click.native="emitReloadEvent()">
-				<logo class="logo-display" color="var(--main-accent)" />
-			</router-link>
 
 			<router-link v-if="loggedIn" class="mobile-button" exact-active-class="active" to="/attachments">
 				<i class="green open folder outline icon"></i>
+				Files
 			</router-link>
 
-			<div class="mobile-button"></div>
+			<!-- menu -->
+			<div class="mobile-button" v-on:click="collapseMenu">
+				<i class="green link bars icon" ></i>
+				Menu
+			</div>
 
-			<!-- mobile create note button -->
-			<span v-if="loggedIn">
-				<span v-if="!disableNewNote" @click="createNote" class="mobile-button">
-					<i class="green plus icon"></i>
-				</span>
-				<span v-if="disableNewNote" class="mobile-button">
-					<i class="grey plus icon"></i>
-				</span>
-			</span>
 
 		</div>
 
@@ -188,12 +229,12 @@
 
 			<div class="menu-section" v-if="loggedIn">
 				<div v-if="!disableNewNote" @click="createNote" class="menu-item menu-item menu-button">
-					<div class="ui green button">
+					<div class="ui green fluid compact button">
 						<i class="plus icon"></i>New Note
 					</div>
 				</div>
 				<div v-if="disableNewNote" class="menu-item menu-item menu-button">
-					<div class="ui basic button">
+					<div class="ui basic fluid compact button">
 						<i class="plus loading icon"></i>New Note
 					</div>
 				</div>
@@ -206,14 +247,19 @@
 				</router-link>
 				<div>
 					<div class="menu-item menu-button sub" v-on:click="updateFastFilters(3)" v-if="$store.getters.totals && ($store.getters.totals['sharedToNotes'] > 0 || $store.getters.totals['sharedFromNotes'] > 0)">
-						<i class="grey mail outline icon"></i>Inbox 
+						<i class="grey paper plane outline icon"></i>Shared
+
+						<counter v-if="$store.getters.totals && $store.getters.totals['sharedToNotes']" class="float-right" number-id="sharedToNotes" />
 					</div>
 					<div class="menu-item menu-button sub" v-on:click="updateFastFilters(2)" v-if="$store.getters.totals && $store.getters.totals['archivedNotes'] > 0">
 							<i class="grey archive icon"></i>Archived
-							<!-- <span>{{ $store.getters.totals['archivedNotes'] }}</span> -->
+							
+							<counter v-if="$store.getters.totals && $store.getters.totals['archivedNotes']" class="float-right" number-id="archivedNotes" />
 						</div>
 					<div class="menu-item menu-button sub" v-on:click="updateFastFilters(4)" v-if="$store.getters.totals && $store.getters.totals['trashedNotes'] > 0">
 							<i class="grey trash alternate outline icon"></i>Trashed
+
+							<counter v-if="$store.getters.totals && $store.getters.totals['trashedNotes']" class="float-right" number-id="trashedNotes" />
 						</div>
 					<!-- <div class="menu-item sub">Show Only <i class="caret down icon"></i></div> -->
 					<!-- <div v-on:click="updateFastFilters(0)" class="menu-item menu-button sub"><i class="grey linkify icon"></i>Links</div> -->
@@ -266,30 +312,53 @@
 					<span v-if="$store.getters.getIsNightMode == 0">
 						<i class="moon outline icon"></i>Black Theme</span>
 					<span v-if="$store.getters.getIsNightMode == 1">
-						<i class="moon outline icon"></i>Flux Theme</span>
-					<span v-if="$store.getters.getIsNightMode == 2">
 						<i class="moon outline icon"></i>Light Theme</span>
 				</div>
 			</div>
 
-			<div class="menu-section">
-				<router-link class="menu-item menu-button" exact-active-class="active" to="/help">
-					<i class="question circle outline icon"></i>Help
-				</router-link>
-			</div>
-
 			<div class="menu-section" v-if="loggedIn">
 				<router-link class="menu-item menu-button" exact-active-class="active" to="/settings">
 					<i class="cog icon"></i>Settings
 				</router-link>
 			</div>
 
+			<div class="menu-section" v-if="loggedIn">
+				<router-link class="menu-item menu-button" exact-active-class="active" to="/metrictrack">
+					<i class="calendar check outlin icon"></i>Metric Track
+				</router-link>
+			</div>
+
+			<div class="menu-section">
+				<router-link class="menu-item menu-button" exact-active-class="active" to="/help">
+					<i class="question circle outline icon"></i>Help
+				</router-link>
+			</div>
+
 			<div class="menu-section" v-if="loggedIn">
 				<div class="menu-item menu-button" v-on:click="logout()">
 					<i class="log out icon"></i>Log Out
 				</div>
 			</div>
 
+			<!-- Tags -->
+			<div class="menu-section" v-if="gotTags()">
+				<div class="menu-item">
+					<i class="green tags icon"></i>
+					Tags
+				</div>
+			</div>
+			<div v-if="gotTags()">
+				<div class="menu-section" 
+					v-for="(data, tag) in $store.getters.totals['tags']">
+					<router-link class="menu-item menu-button" :to="`/search/tags/${tag}`">
+						<span class="single-line-text">
+						<!-- <i class="small grey tag icon"></i> -->
+						<span class="float-right">{{ data.uses }}</span>
+						<span class="faded"> #</span> {{ tag }}</span>
+					</router-link>
+				</div>
+			</div>
+
 			<div v-on:click="reloadPage" class="version-display" v-if="version != 0" >
 				<i :class="`${getVersionIcon()} icon`"></i> {{ version }}
 			</div>
@@ -349,6 +418,16 @@
 			},
 		},
 		methods: {
+			gotTags(){
+
+				if(this.loggedIn && this.$store.getters.totals && this.$store.getters.totals.tags
+					&& Object.keys(this.$store.getters.totals.tags).length
+				){
+
+					return true
+				}
+				return false
+			},
 			logout() {
 				
 				this.$router.push('/')
@@ -447,8 +526,11 @@
 				location.reload(true)
 			},
 			getVersionIcon(){
+				if(!this.version){
+					return 'radiation alternate'
+				}
 				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))
+				const index = ( parseInt(String(this.version).replace(/\./g,'')) % (icons.length))
 				return icons[index]
 
 			}

client/src/components/HelloWorld.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

client/src/components/LoadingIconComponent.vue

@@ -39,9 +39,9 @@
 	.loading-container {
 		text-align: center;
 		width: 100%;
-		min-height: 100px;
+		/*min-height: 100px;*/
 		margin: 20px 0;
-		padding: 40px;
+		/*padding: 40px;*/
 		border-radius: 7px;
 		background-color: var(--small_element_bg_color);
 	}

client/src/components/LoginFormComponent.vue

@@ -1,10 +1,10 @@
 
 <template>
 
-<div v-on:keyup.enter="login()">
+<div>
 
 	<!-- thicc form display  -->
-	<div v-if="!thin" class="ui large form">
+	<div v-if="!thin" class="ui large form" v-on:keyup.enter="register()">
 		<div class="field">
 			<div class="ui input">
 				<input ref="nameForm" v-model="username" type="text" name="email" placeholder="Username or E-mail">
@@ -22,15 +22,20 @@
 		</div>
 		<div class="sixteen wide field">
 			<div class="ui fluid buttons">
-				<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="login()" class="ui green button">
-					<i class="power icon"></i>
-					Login
-				</div>
-				<div class="or"></div>
-				<div v-on:click="register()" class="ui button">
+				
+
+				<div v-on:click="register()" class="ui green button" :class="{ 'disabled':(username.length == 0 || password.length == 0)}">
 					<i class="plug icon"></i>
 					Sign Up
 				</div>
+
+				<div class="or"></div>
+
+				<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="login()" class="ui button">
+					<i class="power icon"></i>
+					Login
+				</div>
+				
 			</div>
 		</div>
 		<div class="sixteen wide column">
@@ -44,7 +49,27 @@
 	</div>
 
 	<!-- Thin form display  -->
-	<div v-if="thin" class="ui small form">
+	<div v-if="thin" class="ui small form" v-on:keyup.enter="login()">
+
+		<div v-if="!require2FA" class="field"><!-- hide this field if someone is logging in with 2FA -->
+			<div class="ui grid">
+				<div class="ui sixteen wide center aligned column">
+					<div v-on:click="register()" class="ui green button">
+						<i class="plug icon"></i>
+						Sign Up Now!
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="field"><!-- hide this field if someone is logging in with 2FA -->
+			<div class="ui grid">
+				<div class="ui sixteen wide center aligned column">
+					Or Login
+				</div>
+			</div>
+		</div>
+
 		<div class="equal width fields">
 			<div class="field">
 				<div class="ui input">
@@ -61,13 +86,6 @@
 					<input v-model="authToken" ref="authForm" type="text" name="authToken" placeholder="Authorization Token">
 				</div>
 			</div>
-			<!-- hide this field if someone is logging in with 2FA -->
-			<div class="field" v-if="!require2FA">
-				<div v-on:click="register()" class="ui fluid green button">
-					<i class="plug icon"></i>
-					Sign Up
-				</div>
-			</div>
 			<div class="field">
 				<div v-on:click="login()" class="ui fluid button">
 					<i class="power icon"></i>
@@ -143,7 +161,14 @@
 			register(){
 
 				if( this.username.length == 0 || this.password.length == 0 ){
-					this.$bus.$emit('notification', 'Unable to Sign Up - Username and Password Required')
+
+					if(this.$route.name == 'LoginPage'){
+						this.$bus.$emit('notification', 'Both a Username and Password are Required')
+						return
+					}
+
+					//Login section
+					this.$router.push('/login')
 					return
 				}
 
@@ -203,7 +228,6 @@
 <style type="text/css" scoped="true">
 	.small-terms {
 		display: inline-block;
-		text-align: right;
 		width: 100%;
 		font-size: 0.9em;
 	}

client/src/components/LogoComponent.vue

@@ -32,22 +32,22 @@
 	       class="darken-accent"
 	       id="path3813-4"
 	       d="m 56.22733,165.36641 -55.56249926,15.875 8e-7,63.5 47.62499846,11.90625 v 27.78125 l -47.76066333,-13.9757 0.13566407,10.00695 55.56249926,15.875 v -47.625 l -47.6249985,-11.90625 -8e-7,-47.625 47.7606633,-13.94121 c 0.135664,-2.30629 -0.135664,-9.87129 -0.135664,-9.87129 z"
-	       :style="`fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
+	       :style="`fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth};stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
 	    <path
 	       class="brighten-accent"
 	       id="path4563"
 	       d="m 20.508581,220.92891 c 15.265814,-14.23899 27.809717,-7.68002 39.687499,3.96875 v -7.9375 C 51.75093,200.8366 37.512584,206.01499 20.508581,205.05391 Z"
-	       :style="`fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
+	       :style="`fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth}px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
 	    <path
 	       class="brighten-accent"
 	       id="path4563-6"
 	       d="m 111.78985,220.92891 c -15.265834,-14.23899 -27.809737,-7.68002 -39.68752,3.96875 v -7.9375 c 8.445151,-16.12356 22.683497,-10.94517 39.68752,-11.90625 z"
-	       :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
+	       :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth}px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1`" />
 	    <path
 	       class="brighten-accent"
 	       id="path3813-4-2"
 	       d="m 76.07108,165.36641 55.5625,15.875 v 63.5 l -47.625,11.90625 v 27.78125 l 47.76067,-13.9757 -0.13567,10.00695 -55.5625,15.875 v -47.625 l 47.625,-11.90626 V 189.17891 L 75.93542,175.2377 c -0.13567,-2.30629 0.13566,-9.87129 0.13566,-9.87129 z"
-	       :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:none;stroke-width:0.52916676;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
+	       :style="`display:inline;fill:${displayColor};fill-opacity:1;stroke:${strokeColor};stroke-width:${strokeWidth};stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1`" />
 	  </g>
 	</svg>
 </template>
@@ -56,13 +56,28 @@
 
 	export default {
 		name: 'LoadingIcon',
-		props:[ 'color' ],
+		props:[ 
+			'color', // hex value for setting colorr
+			'stroke' // enable or disable stroke
+		],
 		data(){ 
 			return {
 				displayColor: '#21BA45', //Default green color
+				strokeWidth: '0.5',
+				strokeColor: 'none',
 			}
+		},
+		beforeCreate(){
+
+			
 		},
 		created(){
+
+			if(this.stroke){
+				this.strokeWidth = 0.4
+				this.strokeColor = 'rgba(0,0,0,0.9)'
+			}
+			
 			//Set color if passed
 			if(this.color){
 				this.displayColor = this.color
@@ -79,4 +94,7 @@
 		filter: saturate(145%);
 		-webkit-filter: saturate(145%);
 	}
+	g > path {
+		filter: drop-shadow(1px 1px 1px black);
+	}
 </style>

client/src/components/Metrictracking/PillCalendarGraph.vue

@@ -0,0 +1,27 @@
+<style type="text/css" scoped></style>
+</style>
+
+<template>
+	<div>
+		I'm a calednar yo
+	</div>
+</template>
+
+<script>
+	export default {
+		props: [
+			'graphOptions', // options associated with this graph
+			'tempChartDays', // number of days to display
+			'cycleData', // all users metric data
+		],
+		data: function(){
+			return {
+				openModel:true,
+			}
+		},
+		methods: {
+			closeModel(){
+			},
+		}
+	}
+</script>

client/src/components/ModalComponent.vue

@@ -0,0 +1,164 @@
+<style type="text/css" scoped>
+	.modal-content {
+		position: fixed;
+		top: 40%;
+		left: 50%;
+		/* bring your own prefixes */
+		transform: translate(-50%, -40%);
+		z-index: 300;
+		padding: 1em;
+		box-sizing: border-box;
+		width: 50%;
+		max-height: 100%;
+		/*overflow: hidden;*/
+		overflow-y: scroll;
+		font-weight: normal;
+	}
+	.modal-content.fullscreen {
+		width: 96%;
+		height: 100%;
+		max-height: 100%;
+	}
+	.close-container {
+		position: fixed;
+	    top: 5px;
+	    right: 5px;
+	    z-index: 320;
+	}
+
+	/* Shrink button text for mobile */
+	@media only screen and (max-width: 740px) {
+		.modal-content {
+			width: 100%;
+			padding-bottom: 55px;
+		}
+	}
+
+	.modal-content.right-side {
+	    width: 60%;
+	    max-height: none;
+	    height: 100vh;
+	    padding: 0;
+	    margin: 0;
+	    top: 0;
+	    bottom: 0;
+	    left: 0;
+	    left: auto;
+	    transform: translate(0, 0);
+	}
+	.close-container-right-side {
+		position: fixed;
+	    top: 5px;
+        left: calc(60% + 2px);
+	    z-index: 320;
+	}
+
+	.shade {
+		position: fixed;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #0000007d;
+		z-index: 299;
+		backdrop-filter: blur(2px);
+	}
+
+	.fade-out-top {
+		animation: fade-out-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	}
+
+	.fade-out {
+		animation: fade-out 0.3s ease-out both;
+	}
+
+	@keyframes fade-out-top {
+		0% {
+			/*transform: translate(-50%, -50%);*/
+			opacity: 1;
+		}
+		100% {
+			/*transform: translate(-50%, -70%);*/
+			opacity: 0;
+		}
+	}
+
+	@keyframes fade-out {
+		0% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+
+	.fade-in {
+		/*animation: fade-in 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;*/
+	}
+		@keyframes fade-in {
+		0% {
+			transform: translate(-50%, -70%);
+			opacity: 0;
+		}
+		100% {
+			transform: translate(-50%, -50%);
+			opacity: 1;
+		}
+	}
+
+</style>
+
+<template>
+	<div v-if="openModel">
+		<div class="modal-content" :class="{ 'fade-out-top':(animateOut), 'fade-in':(!animateOut), 'fullscreen':(fullscreen)}">
+
+			<slot></slot>
+		</div>
+		<!-- full screen close button -->
+		<div class="close-container" v-if="fullscreen && clickOutClose !== false">
+			<div class="ui green icon button" v-on:click="closeModel">
+				<i class="close icon"></i>
+			</div>
+		</div>
+
+		<div class="shade" v-on:click="closeModel" v-on:mouseenter=" hoverOutClose?closeModel():null " :class="{ 'fade-out':(animateOut) }"></div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: [
+			'fullscreen', //Make the model really big
+			'clickOutClose', //Set to false to prevent closing of modal by clicking out
+			'hoverOutClose', //Close if cursor leaves modal
+		],
+		data: function(){
+			return {
+				openModel:true,
+				animateOut:false,
+			}
+		},
+		methods: {
+			closeModel(){
+
+				//Don't allow closing by clicking out
+				if(this.clickOutClose === false){
+					return
+				}
+
+				//Set stups to close model, animate out
+				this.animateOut = true
+				setTimeout( () => {
+					this.openModel = false
+					this.$emit('close')
+
+					//Once close event is sent, reset to default state
+					this.animateOut = false
+					this.openModel = true
+
+				}, 800)
+			},
+		}
+	}
+</script>

client/src/components/NoteTitleDisplayCard.vue

@@ -1,12 +1,15 @@
 <template>
 	<div class="note-title-display-card" 
 		:style="{'background-color':color, 'color':fontColor, 'border-color':color }"
-		:class="{'currently-open':(currentlyOpen || showWorking), 'bgboy':triggerClosedAnimation, 'title-view':titleView }"
-	>
+		:class="{
+			'currently-open':(currentlyOpen || showWorking), 
+			'ring':triggerClosedAnimation, 
+			'title-view':titleView 
+		}">
 
 
 			<!-- Show title and snippet below it -->
-			<div class="overflow-hidden note-card-text" @click="cardClicked" v-if="!titleView">
+			<div class="overflow-hidden note-card-text" @click.stop="cardClicked" v-if="!titleView">
 
 				<span v-if="note.title == '' && note.subtext == ''">
 					Empty Note
@@ -20,23 +23,10 @@
 				<span v-if="note.title.length > 0" 
 					class="big-text"><p>{{ note.title }}</p></span>
 
-				<!-- Sub text display -->
-				<span v-if="note.subtext.length > 0"
-					class="small-text"
-					v-html="note.subtext"></span>
-
-
-				<!-- Not indexed warning -->
-<!-- 				<span v-if="note.indexed != 1">
-					<span class="green label">Not Indexed</span>
-				</span> -->
-
-				
-				<div class="ui fluid basic button" v-if="note.encrypted == 1">
-					<i class="green lock icon"></i>
-					Locked
-				</div>
-
+				<span class="tags" v-if="note.tags">
+					<span  v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click.stop="$emit('tagClick', tag.split(':')[1] )">#{{ tag.split(':')[0] }}</span>
+					<br>
+				</span>
 
 				<!-- Shared Details -->
 				<span class="subtext" v-if="note.shared == 2">
@@ -57,28 +47,85 @@
 					</span>
 				</span>
 
-			</div>
+				<!-- Sub text display -->
+				<span v-if="note.subtext.length > 0"
+					class="small-text"
+					v-html="note.subtext"></span>
+
+
+				<!-- Not indexed warning -->
+<!-- 				<span v-if="note.indexed != 1">
+					<span class="green label">Not Indexed</span>
+				</span> -->
+
 				
-			<div v-if="titleView" class="single-line-text" @click="cardClicked">
-				<span class="title-line" v-if="note.title.length > 0">{{ note.title }}<br></span>
-				<span class="sub-line" v-if="note.subtext.length > 0">{{ removeHtml(note.subtext) }}</span>
-				<span v-if="note.title.length == 0 && note.title.length == 0">Empty Note</span>
+<!-- 				<div class="ui fluid basic button" v-if="note.encrypted == 1">
+					<i class="green lock icon"></i>
+					Locked
+				</div> -->
+
+			</div>
+			
+			<!-- slim card view  -->
+			<div v-if="titleView" class="thin-container" @click="cardClicked">
+					
+				<!-- icon -->
+				<span v-if="noteIcon" class="thin-icon">
+					<i :class="`${noteIcon} icon`" :style="{ 'color':iconColor }"></i>
+				</span>
+				
+				<!-- title -->
+				<span class="thin-title" v-if="note.title.length > 0">{{ note.title }}</span>
+				
+				<!-- snippet  -->
+				<span class="thick-sub" v-if="note.subtext.length > 0 && note.title.length == 0">
+					{{ removeHtml(note.subtext) }}
+				</span>
+				<span class="thin-sub" v-else-if="note.subtext.length > 0">
+					{{ removeHtml(note.subtext) }}
+				</span>
+				<span v-else-if="note.title.length == 0 && removeHtml(note.subtext).length == 0">
+					Empty Note
+				</span>
+			
+				<!-- tags -->
+				<span v-if="note.tags" class="thin-tags" >
+					<span  v-for="tag in (note.tags.split(','))" class="little-tag" v-on:click="$emit('tagClick', tag.split(':')[1] )">#{{ tag.split(':')[0] }}
+					</span>
+				</span>
+
+				<!-- edited -->
+				<span class="thin-right">
+					{{$helpers.timeAgo( note.updated )}}
+
+					<i class="green link ellipsis vertical icon"></i>
+				</span>
+
 			</div>
 				
 			<!-- Toolbar on the bottom  -->
 			<div class="tool-bar" @click.self="cardClicked" v-if="!titleView">
-				<div class="icon-bar">
-					
-					<span class="tags" v-if="note.tags">
-						<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>
 
-					<span class="time-ago-display" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
+				<div v-if="getThumbs.length > 0">
+					<div class="tiny-thumb-box" v-on:click="openEditAttachment">
+						<img v-for="thumb in getThumbs" 
+							class="tiny-thumb" 
+							:src="`/api/static/thumb_${thumb}`"
+							onerror="
+								this.onerror=null;
+								this.src='/api/static/assets/marketing/void.svg';
+							"
+						/>
+					</div>
+				</div>
+
+				<div class="icon-bar" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
+
+					<span class="time-ago-display">
 						{{$helpers.timeAgo( note.updated )}}
 					</span>
 
-					<span class="teeny-buttons" :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }">
+					<span class="teeny-buttons">
 
 						<span v-if="!note.trashed">
 
@@ -115,19 +162,13 @@
 							</i>
 							<delete-button class="teeny-button" :note-id="note.id" />
 						</span>
-
-						
-
 					</span>
 				</div>
 
-				<div v-if="getThumbs.length > 0">
-					<div class="tiny-thumb-box" v-on:click="openEditAttachment">
-						<img v-for="thumb in getThumbs" class="tiny-thumb" :src="`/api/static/thumb_${thumb}`">
-					</div>
-				</div>
+				
 			</div>
 
+			<!-- tag edit menu -->
 			<side-slide-menu v-if="showTagSlideMenu" v-on:close="toggleTags(false)" :full-shadow="true" :skip-history="true">
 				<div class="ui basic segment">
 					<note-tag-edit :noteId="note.id" :key="'display-tags-for-note-'+note.id"/>
@@ -186,10 +227,12 @@
 			},
 			pinNote(){ //togglePinned() <- old name
 				this.showWorking = true
-				let postData = {'pinned': !this.note.pinned, 'noteId':this.note.id}
+				this.note.pinned = this.note.pinned == 1 ? 0:1
+				let postData = {'pinned': this.note.pinned, 'noteId':this.note.id}
 				axios.post('/api/note/setpinned', postData)
 				.then(data => {
 					this.showWorking = false
+					// this event is triggered by the server after note is saved
 					// this.$bus.$emit('update_single_note', this.note.id)
 				})
 				.catch(error => { this.$bus.$emit('notification', 'Failed to Pin Note') })
@@ -205,11 +248,10 @@
 					//Show message so no one worries where note went
 					let message = 'Moved to Archive'
 					if(postData.archived != 1){
-						message = 'Moved to main list'
+						message = 'Moved out of Archive'
 					}
 					this.$bus.$emit('notification', message)
-
-					// this.$bus.$emit('update_single_note', this.note.id)
+					this.$bus.$emit('update_single_note', this.note.id)
 				})
 				.catch(error => { this.$bus.$emit('notification', 'Failed to Archive Note') })
 			},
@@ -224,9 +266,10 @@
 					//Show message so no one worries where note went
 					let message = 'Moved to Trash'
 					if(postData.trashed == 0){
-						message = 'Moved to main list'
+						message = 'Moved out of Trash'
 					}
 					this.$bus.$emit('notification', message)
+					this.$bus.$emit('update_single_note', this.note.id)
 
 				})
 				.catch(error => { this.$bus.$emit('notification', 'Failed to Trash Note') })
@@ -243,11 +286,11 @@
 			justClosed(){
 
 				// Scroll note into view
-				// this.$el.scrollIntoView({
-				// 	behavior: 'smooth',
-				// 	block: 'center',
-				// 	inline: 'center'
-				// })
+				this.$el.scrollIntoView({
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'center'
+				})
 
 				//After scroll, trigger green outline animation
 				setTimeout(() => {
@@ -256,7 +299,7 @@
 					setTimeout(()=>{
 						//After 3 seconds, hide it
 						this.triggerClosedAnimation = false
-					}, 3000)
+					}, 1500)
 
 				}, 500)
 				
@@ -333,13 +376,11 @@
 
 	.teeny-buttons {
 		float: right;
-		width: 65%;
 		text-align: right;
 	}
 	.time-ago-display {
-		width: 35%;
-		float: left;
-		text-align: center;
+		font-size: 11px;
+		font-weight: bold;
 	}
 	.tags {
 		width: 100%;
@@ -364,9 +405,7 @@
 
 	/*Strict font sizes for card display*/
 	.small-text {
-		max-height: 267px;
 		width: 100%;
-		overflow: hidden;
 		display: inline-block;
 	}
 	.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
@@ -414,10 +453,10 @@
 	.note-title-display-card {
 		position: relative;
 		background-color: var(--small_element_bg_color);
+
 		/*The subtle shadow*/
-		/*box-shadow: 0px 1px 2px 1px rgba(210, 211, 211, 0.46);*/
 		box-shadow: 2px 2px 6px 0 rgba(0,0,0,.15);
-		transition: box-shadow ease 0.5s, transform linear 0.1s;
+		transition: box-shadow, border-color ease 0.5s, transform linear 0.5s;
 		margin: 5px;
 		/*padding: 0.7em 1em;*/
 		border-radius: .28571429rem;
@@ -426,7 +465,7 @@
 		/*width: calc(33.333% - 10px);*/
 		width: calc(25% - 10px);
 		/*min-width: 190px;*/
-		min-height: 130px;
+		/*min-height: 130px;*/
 		/*transition: box-shadow 0.3s;*/
 		box-sizing: border-box;
 		cursor: pointer;
@@ -435,32 +474,72 @@
 		letter-spacing: 0.05rem;
 		display: flex;
 		flex-direction: column;
+		align-items: stretch;
 		text-align: left;
+
+		min-height: 100px;
+		max-height: 450px;
 	}
 	.note-title-display-card:hover {
-		/*box-shadow: 0px 2px 2px 1px rgba(210, 211, 211, 0.8);*/
-		/*transform: translateY(-2px);*/
-		box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+		box-shadow: 0 8px 15px rgba(0,0,0,0.3);
+		border-color: var(--main-accent);
 	}
 	.note-title-display-card.title-view {
 		width: 100%;
 		min-height: 20px;
 		max-width: none;
+		padding: 10px;
+		margin: 0;
+		/*overflow: hidden;*/
+		border-radius: 0;
+		border: none;
 		/*box-shadow: 0px 0px 1px 1px rgba(210, 211, 211, 0.46);*/
 	}
-		
-	.single-line-text {
+	.title-view + .title-view {
+		border-top: 1px solid var(--border_color);
+	}
+
+	.thin-container.single-line-text {
 		width: calc(100% - 25px);
-		margin: 5px 10px;
+		/*margin: 5px 10px;*/
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		box-sizing: border-box;
 	}
-	.title-line {
+
+	.thin-container .thin-title {
 		font-weight: bold;
 		font-size: 1.2em;
-		padding: 0 20px 0 0;
+	}
+	.thin-container .thin-sub {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 1;
+		line-clamp: 1; 
+		-webkit-box-orient: vertical;
+		opacity: 0.85;
+	}
+	.thin-container .thick-sub {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		line-clamp: 3; 
+		-webkit-box-orient: vertical;
+		opacity: 0.85;
+	}
+	.thin-container .thin-tags {
+		float: left;
+		margin-top: 3px;
+	}
+	.thin-container .thin-right {
+		float: right;
+		color: var(--dark_border_color);
+	}
+	.thin-container .thin-icon {
+		float: right;
 	}
 
 	.icon-bar {
@@ -468,6 +547,7 @@
 		padding: 5px 10px 0;
 		opacity: 1;
 		width: 100%;
+		background-color: rgba(200, 200, 200, 0.2);
 	}
 	.hover-hide {
 		opacity: 0.0;
@@ -476,7 +556,6 @@
 	.little-tag {
 		font-size: 0.7em;
 		padding: 5px 5px;
-		border: 1px solid var(--border_color);
 		margin: 0 3px 5px 0;
 		border-radius: 3px;
 		white-space: nowrap;
@@ -486,6 +565,8 @@
 		line-height: 0.8em;
 		text-overflow: ellipsis;
 		float: left;
+		color: var(--main-accent);
+		opacity: 0.8;
 	}
 	.tiny-thumb-box {
 		max-height: 70px;
@@ -646,4 +727,36 @@
     animation: bgin 4s cubic-bezier(0.19, 1, 0.22, 1) 1;
 }
 
+/*switch between ring or BG boy to change save animation*/
+
+.ring {
+	position: relative;
+}
+.ring::after {
+  content: '';
+  width: 10px; 
+  height: 10px;
+  border-radius: 100%;
+  border: 6px solid #00FFCB;
+  position: absolute;
+  z-index: 800;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: ring 1.5s 1;
+}
+
+@keyframes ring {
+  0% {
+    width: 10px;
+    height: 10px;
+    opacity: 1;
+  }
+  100% {
+    width: 420px;
+    height: 420px;
+    opacity: 0;
+  }
+}
+
 </style>

client/src/components/PasteButton.vue

@@ -0,0 +1,116 @@
+<template>
+<div>
+	<div class="ui right floated basic shrinking icon button" v-on:click="showPasteInputArea">
+		<i class="paste icon"></i>
+		Paste
+	</div>
+	<div class="shade" v-if="showPasteArea" @click.prevent="close">
+		<div class="ui stackable grid full-height" @click.prevent="close">
+			<div class="four wide column"></div>
+			<div class="eight wide middle aligned center aligned column">
+				<div class="ui raised segment">
+					<div class="ui dividing header">
+						<i class="green paste icon"></i>
+						Paste & automatically Save
+					</div>
+					<div class="ui fluid action input">
+						<input 
+							id="pastetextarea" 
+							type="text"
+							ref="pastearea"
+							@paste.prevent="onPaste"
+							@keyup.enter.prevent="onEnter"
+							placeholder="Paste Here">
+						<button class="ui green labeled icon button" @click.prevent="onEnter">
+							<i class="save icon"></i>
+							Save
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="four wide column"></div>
+		</div>
+		
+	</div>
+</div>
+</template>
+
+<script>
+
+import axios from 'axios'
+
+export default {
+	name: 'PasteButton',
+		props: {},
+		data () {
+			return {
+				showPasteArea: false,
+			}
+		},
+		methods: {
+			close(){
+				this.showPasteArea = false
+			},
+			onEnter(e){
+
+				const text = this.$refs.pastearea.value
+				this.saveText(text)
+
+			},
+			onPaste(e){
+
+				// Get pasted data via clipboard API
+				const clipboardData = e.clipboardData || window.clipboardData
+				const pastedData = String(clipboardData.getData('Text')).trim()
+
+				this.saveText(pastedData)
+
+			},
+			saveText(text){
+
+				this.showPasteArea = false
+				if(!text){
+					this.$bus.$emit('notification', 'Nothing to save.')
+					return;
+				}
+
+				axios.post('/api/quick-note/update', { 'pushText':text } )
+				.then( response => {
+
+					this.$bus.$emit('notification', 'Saved To Scratch Pad')
+				})
+				.catch(error => { 
+					this.$bus.$emit('notification', 'Failed to Save')
+				})
+
+			},
+			showPasteInputArea(){
+
+				// Show text area and focus its contents
+				this.showPasteArea = true
+				this.$nextTick(() => {
+					const aux = document.getElementById('pastetextarea')
+					aux.focus();
+				})
+
+				// auto hide after 1 Minute
+				setTimeout(() => {
+					this.showPasteArea = false
+				}, 60*1000)
+			},
+		}
+	}
+</script>
+
+<style scoped lang="css">
+	.paste-text-container {
+		background-color: green;
+		position: absolute;
+		width: 50vw;
+		height: 80vh;
+		display: inline-block;
+	}
+	.full-height {
+		height: 100vh;
+	}
+</style>

client/src/components/SearchInput.vue

@@ -35,7 +35,6 @@
 				<i class="search icon"></i>
 			</div>
 
-
 			<div class="floating-button" v-if="searchTerm.length > 0">
 				<i class="big link grey close icon" v-on:click="clear()"></i>
 			</div>

client/src/components/SideSlideMenuComponent.vue

@@ -1,9 +1,9 @@
 <style type="text/css" scoped>
 	.slide-container {
-		position: fixed;
+		position: absolute;
 		top: 0;
 		left: 0;
-		right: 50%;
+		right: 0;
 		bottom: 0;
 		z-index: 1020;
 		overflow: hidden;
@@ -27,7 +27,7 @@
 		right: 0;
 		bottom: 0;
 		color: red;
-		/*background-color: rgba(0,0,0,0.5);*/
+		background-color: rgba(0,0,0,0.5);
 		/*background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 55%);*/
 		z-index: 1019;
 		overflow: hidden;
@@ -88,19 +88,19 @@
 
 			<div class="slide-container" :style="{ 'background-color':bgColor, 'color':textColor}">
 
-				<!-- content of the editor  -->
-				<div class="slide-content">
-					<slot></slot>
-				</div>
-
 				<!-- close menu on bottom  -->
 				<div class="note-menu">
 					<nm-button more-class="right" icon="close" text="close" :show-text="true" v-on:click.native="close" />
 				</div>
 
+				<!-- content of the editor  -->
+				<div class="slide-content">
+					<slot></slot>
+				</div>
+
 			</div>
 			
-			<div class="slide-shadow" :class="{'full-shadow':fullShadow}" v-on:click="close"></div>
+			<!-- <div class="slide-shadow" :class="{'full-shadow':fullShadow}" v-on:click="close"></div> -->
 			
 		</div>
 	<!-- </transition> -->

client/src/components/TagDisplayComponent.vue

@@ -113,6 +113,7 @@
 <style type="text/css">
 	.button-fix {
 		display: inline-block;
+		float: left;
 	}
 	.hover-row:hover {
 		cursor: pointer;

client/src/components/TextColorTooltipComponent.vue

@@ -2,22 +2,43 @@
 	.colors {
 		position: fixed;
 		z-index: 1023;
-		top: 5px;
+		top: 35px;
 		/*height: 100px;*/
 		width: 400px;
 		left: 20%;
 	}
 	.colors-container {
-		max-width: 370px;
+		/*max-width: 360px;*/
+		display: flex;
+		/*flex-direction: column;*/
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: stretch;
+		align-content: stretch;
+
+		height: 250px;
+		width: 100%;
 	}
 	.dot {
-		display: inline-block;
-		width: 30px;
-		height: 30px;
+		/*display: inline-block;*/
+
 		border-radius: 30px;
-		box-shadow: 0px 1px 3px 0px #3e3e3e;
-		margin: 7px 7px 0 0;
+		box-shadow: 0px 0px 0px 1px inset #3e3e3e;
+		margin: 0 0 2px 2px;
 		cursor: pointer;
+		flex-basis: 9%;
+		height: 30px;
+		text-align: center;
+	}
+	.dot > i {
+		margin: 9px 0 0 0;
+		color: white;
+		text-shadow: 
+			1px 1px 2px #3e3e3e,
+			1px -1px 2px #3e3e3e,
+			-1px 1px 2px #3e3e3e,
+			-1px -1px 2px #3e3e3e
+		;
 	}
 	.shade {
 		position: fixed;
@@ -30,12 +51,16 @@
 		width: 100vw;
 		height: 100vh;
 	}
+	.big-shadow {
+		box-shadow: 0px 4px 5px 1px #a8a8a8;
+	}
 	@media only screen and (max-width: 740px) {
 		.colors {
 			position: fixed;
-			left: 0;
-			right: 0;
-			top: 0;
+			left: 5px;
+			right: -5px;
+			top: 5px;
+			width: 95%;
 		}
 	}
 </style>
@@ -43,13 +68,15 @@
 <template>
 	<div>
 		<div class="colors">
-			<div class="ui raised segment">
+			<div class="ui segment big-shadow">
+				<h3>Select Text Color</h3>
 				<div class="colors-container">
 					<span 
 						v-for="(color,index) in colors" 
 						class="dot"
 						v-on:click="onColorClick(index)"
 						:style="`background-color: ${color};`">
+						<i v-if="lastUsedColor == color" class="check icon"></i>
 					</span>
 				</div>
 			</div>
@@ -65,6 +92,7 @@
 		components:{
 			'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
 		},
+		props: [ 'lastUsedColor' ],
 		data: function(){ 
 			return {
 				hover: false,

client/src/main.js

@@ -4,7 +4,6 @@
 import Vue from 'vue'
 
 import Vuex from 'vuex'
-import 'es6-promise/auto' //Vuex likes promises
 import store from './stores/mainStore';
 
 import App from './App'
@@ -14,19 +13,19 @@ import router from './router'
 // import 'fomantic-ui-css/semantic.css';
 
 //Required site and reset CSS
-import 'fomantic-ui-css/components/reset.css'
+import 'fomantic-ui-css/components/reset.min.css'
 import 'fomantic-ui-css/components/site.css' //modified to remove included LATO fonts
 
 //Only include parts that are used
-import 'fomantic-ui-css/components/button.css'
-import 'fomantic-ui-css/components/container.css'
-import 'fomantic-ui-css/components/form.css'
-import 'fomantic-ui-css/components/grid.css'
-import 'fomantic-ui-css/components/header.css'
+import 'fomantic-ui-css/components/button.min.css'
+import 'fomantic-ui-css/components/container.min.css'
+import 'fomantic-ui-css/components/form.min.css'
+import 'fomantic-ui-css/components/grid.min.css'
+import 'fomantic-ui-css/components/header.min.css'
 import 'fomantic-ui-css/components/icon.css' //Modified to remove brand icons
-import 'fomantic-ui-css/components/input.css'
-import 'fomantic-ui-css/components/segment.css'
-import 'fomantic-ui-css/components/label.css'
+import 'fomantic-ui-css/components/input.min.css'
+import 'fomantic-ui-css/components/segment.min.css'
+import 'fomantic-ui-css/components/label.min.css'
 
 
 //Overwrite and site styles and themes and good stuff
@@ -36,7 +35,7 @@ require('./assets/roboto-latin.woff2')
 require('./assets/roboto-latin-bold.woff2')
 
 
-require('./assets/squire.js')
+
 
 //Import socket io, init using nginx configured socket path
 import io from 'socket.io-client';
@@ -66,9 +65,7 @@ Vue.use(Vuex)
 Vue.config.productionTip = false
 
 new Vue({
-  el: '#app',
-  router,
-  store,
-  components: { App },
-  template: '<App/>'
-})
+	router,
+	store,
+	render: h => h(App),
+}).$mount('#app')

client/src/mixins/SquireButtonFunctions.js

@@ -9,6 +9,8 @@ const SquireButtonFunctions = {
             activeList: false,
             activeToDo: false,
             activeColor: null,
+            activeCode: false,
+            activeSubTitle: false,
             //
             lastUsedColor: null,
 		}
@@ -28,6 +30,8 @@ const SquireButtonFunctions = {
 			this.activeToDo = false
 			this.activeColor = null
 			this.activeUnderline = false
+			this.activeCode = false
+            this.activeSubTitle = false
 
 			if(e.path.indexOf('>U>') > -1 || e.path.search(/U$/) > -1){
 				this.activeUnderline = true
@@ -38,15 +42,21 @@ const SquireButtonFunctions = {
 			if(e.path.indexOf('>I') > -1){
 				this.activeItalics = true
 			}
-			if(e.path.indexOf('fontSize') > -1){
+			if(e.path.indexOf('fontSize=1.4em') > -1){
 				this.activeTitle = true
 			}
+			if(e.path.indexOf('fontSize=0.9em') > -1){
+				this.activeSubTitle = true
+			}
 			if(e.path.indexOf('OL>LI') > -1){
 				this.activeList = true
 			}
 			if(e.path.indexOf('UL>LI') > -1){
 				this.activeToDo = true
 			}
+			if(e.path.indexOf('CODE') > -1){
+				this.activeCode= true
+			}
 			const colorIndex = e.path.indexOf('color=')
 			if(colorIndex > -1){
 				//Get all digigs after color index, then limit to 3
@@ -143,6 +153,12 @@ const SquireButtonFunctions = {
 				this.editor.italic()
 			}
 		},
+		modifyCode(){
+
+			this.selectLineIfNoSelect()
+
+			this.editor.toggleCode()
+		},
 		undoCustom(){
 			//The same as pressing CTRL + Z 
 			// this.editor.focus()
@@ -341,9 +357,21 @@ const SquireButtonFunctions = {
 		},
 		setText(inText){
 
+
+
 			this.editor.setHTML(inText)
 			// this.noteText = this.editor._getHTML()
 			// this.diffNoteText = this.editor._getHTML()
+			
+			//Make sure all list items have draggable property
+			let container = document.getElementById('squire-id')
+			let listItems = container.getElementsByTagName('li')
+			for(let itemIndex in listItems){
+				// console.log(listItems[itemIndex])
+				// listItems[itemIndex].setAttribute('draggable','true')
+			}
+			// console.log(listItems)
+
 		},
 		getText(){
 
@@ -376,6 +404,26 @@ const SquireButtonFunctions = {
 
 			this.$router.go(-1)
 		},
+		indentText(){
+
+			// Lists use increase list level, increase quote breaks numbering
+			if(this.activeList || this.activeToDo){
+
+				this.editor.increaseListLevel()
+				return
+			}
+			this.editor.increaseQuoteLevel()
+		},
+		outdentText(){
+
+			// Lists use increase list level, increase quote breaks numbering
+			if(this.activeList || this.activeToDo){
+
+				this.editor.decreaseListLevel()
+				return
+			}
+			this.editor.decreaseQuoteLevel()
+		},
 	},
 }
 

client/src/pages/AttachmentsPage.vue

@@ -36,6 +36,32 @@
 					Other Files
 				</router-link>
 
+				<router-link
+					v-if="$store.getters.totals && $store.getters.totals['archivedNotes']"
+					exact-active-class="green"
+					class="ui basic button shrinking"
+					to="/attachments/type/archived">
+					<i class="archive icon"></i>
+					Archived
+				</router-link>
+ 				<router-link 
+ 					v-if="$store.getters.totals && $store.getters.totals['trashedNotes']"
+					exact-active-class="green"
+					class="ui basic button shrinking"
+					to="/attachments/type/trashed">
+					<i class="trash icon"></i>
+					Trashed
+				</router-link>
+			
+				<router-link 
+					v-if="$store.getters.totals && $store.getters.totals['sharedToNotes']"
+					exact-active-class="green"
+					class="ui basic button shrinking"
+					to="/attachments/type/shared">
+					<i class="send icon"></i>
+					Show Shared
+				</router-link>
+
 			</div>
 
 			<div class="sixteen wide column" v-if="searchParams.noteId">
@@ -165,6 +191,12 @@
 					this.searchParams.attachmentType = this.$route.params.type
 				}
 
+				// include files from shared notes or selected notes
+				this.searchParams.includeShared = false
+				if(this.$route.params.type == 'shared'){
+					this.searchParams.includeShared = true
+				}
+
 				//Set noteId in if in URL
 				if(this.$route.params.id){
 					this.searchParams.noteId = this.$route.params.id

client/src/pages/HomePage.vue

@@ -11,7 +11,29 @@
 		-moz-animation: fadeorama 16s ease infinite;
 		animation: fadeorama 16s ease infinite;
 		height: 350px;
+
+		text-shadow: 
+			1px 1px 1px rgba(69,69,69,0.1),
+			-1px -1px 1px rgba(69,69,69,0.1),
+			-1px 1px 1px rgba(69,69,69,0.1),
+			1px -1px 1px rgba(69,69,69,0.1)
+			;
 	}
+	.shine {
+		position: absolute;
+		width: 100%;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: none;
+	}
+	.spotlight {
+		background: rgba(255,255,255,0);
+		background: radial-gradient(circle at bottom, var(--main-accent) 0%, rgba(255,255,255,0) 60%);
+		z-index: 200;
+	}
+
 	.logo-display {
 		width: 140px;
 		height: auto;
@@ -24,10 +46,14 @@
 		font-size: 4rem;
 		text-align: center;
 	}
+	div#app div.lightly-padded.home-main div.ui.centered.vertically.divided.stackable.grid div.row.hero.fadeBg div.sixteen.wide.middle.aligned.center.column h2.massive-text svg.logo-display path {
+		stroke: black !important;
+		stroke-width: 1px !important;
+	}
 	.blinking {
 		animation:blinkingText 1.5s linear infinite;
 	}
-	@keyframes blinkingText{
+	@keyframes blinkingText {
 		0%{		opacity: 0.9;	}
 		50%{	opacity: 0;	}
 		100%{	opacity: 0.9;	}
@@ -101,10 +127,11 @@
 				<!-- <div class="one wide large screen only column"></div> -->
 
 				<!-- desktop column - large screen only -->
-				<div class="sixteen wide middle aligned center aligned column">
+				<div class="sixteen wide middle aligned center aligned column" style="z-index: 500;">
 
 					<h2 class="massive-text">
-						<img class="logo-display" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo">
+						<!-- <img class="logo-display" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo"> -->
+						<logo class="logo-display" color="var(--main-accent)" stroke="true" />
 						<br>
 						Solid Scribe
 					</h2>
@@ -118,33 +145,38 @@
 <!-- 				<div class="eight wide middle aligned left aligned column">
 					<img loading="lazy" width="90%" src="/api/static/assets/marketing/notebook.svg" alt="The Venus fly laptop about to capture another victim">
 				</div> -->
+
+				<div v-for="i in jewelFacets" class="shine" :style="shineStyle(i)" v-bind:key="i"></div>
+
+				<div class="shine spotlight"></div>
 				
 			</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="">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/add.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/gardening.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/growth.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/icecream.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/investing.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/onboarding.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/robot.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/solution.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/watching.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/cloud.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/grandma.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/hamburger.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/idea.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/notebook.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/plan.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/secure.svg">
+					<img loading="lazy" width="10%" src="/api/static/assets/marketing/void.svg">
 				</div>
 
 			<!-- Go to notes button  -->
 			<div class="row" v-if="$parent.loggedIn">
 				<div class="sixteen wide middle algined center aligned column">
+					<h3>You are already logged in</h3>
 					<router-link  class="ui huge green labeled icon button" to="/notes">
 						<i class="external alternate icon"></i>Go to Notes
 					</router-link>
@@ -167,13 +199,33 @@
 			<!-- Overview -->
 			<div class="middle aligned centered row">
 				<div class="six wide column">
-					<h2>Powerful text editing and privacy</h2>
+					<h2 class="ui dividing header">Powerful text editing and privacy</h2>
 					<h3>Easily edit, share and organize thousands of notes.</h3>
 					<h3>Feel safe knowing no one can read your notes but you.</h3>
 					<!-- <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">
+					<svg-displayer file="idea" alt="Explosion of New Ideas" />
+				</div>
+			</div>
+
+			<!-- theme selector -->
+			<div class="ui white row">
+				<div class="sixteen wide middle aligned column">
+					<div class="ui container">
+						<h2 style="color: var(--main-accent);">
+							Pick your theme
+						</h2>
+						<h3 v-if="$parent.loggedIn">Go to settings to change theme</h3>
+						<div 
+							v-for="color in themeColors" 
+							v-bind:key="color"
+							class="ui small basic button"
+							:style="`background: linear-gradient(0deg, ${color} 4%, rgba(0,0,0,0) 5%);`"
+							v-on:click="setAccentColor(color)">
+							<logo style="width: 20px; height: auto;" :color="color" />
+						</div>
+					</div>
 				</div>
 			</div>
 
@@ -183,42 +235,42 @@
 				<!-- note features  -->
 				<div class="six wide column">
 
-					<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>App Features</h1>
+					<h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>App Features</h1>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey sticky note icon"></i>
 								<i class="bottom left corner teal plus icon"></i> 
 							</i>
-							Create as many notes as you want
+							Create a million notes!
 							<div class="sub header">Create unlimited notes up to 5,000,000 characters long.</div>
 						</div>
 					</h2>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui 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 search or sort by tag.</div>
+							<div class="sub header">Add and edit tags on notes then search or sort by tag.</div>
 						</div>
 					</h2>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey search icon"></i> 
 								<i class="bottom left corner orange font icon"></i> 
 							</i>
 							Search Note Text
-							<div class="sub header">Easily search all notes, files, links and tags.</div>
+							<div class="sub header">Search all notes, files, links and tags.</div>
 						</div>
 					</h2>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey search icon"></i> 
@@ -229,7 +281,7 @@
 						</div>
 					</h2>
 
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey cloud moon icon"></i> 
@@ -243,8 +295,8 @@
 
 				<!-- editing features  -->
 				<div class="six wide column">
-					<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Editing Features</h1>
-					<h2 class="ui dividing header">
+					<h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>Editing Features</h1>
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey list icon"></i> 
@@ -254,7 +306,7 @@
 							<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">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey file icon"></i> 
@@ -264,7 +316,7 @@
 							<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">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey file icon"></i> 
@@ -274,7 +326,7 @@
 							<div class="sub header">Color the background of notes and add colored icons to make them stand out.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey images icon"></i> 
@@ -284,7 +336,7 @@
 							<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">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey users icon"></i> 
@@ -301,38 +353,38 @@
 			<div class="middle aligned centered row">
 				<!-- privacy features -->
 				<div class="six wide column">
-					<h1 class="ui center aligned header"><i class="sliders horizontal icon"></i>Privacy Features</h1>
-					<h2 class="ui dividing header">
+					<h1 class="ui center aligned dividing header"><i class="small green sliders horizontal icon"></i>Privacy Features</h1>
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey lock icon"></i> 
 								<i class="bottom left corner yellow key icon"></i> 
 							</i>
-							All Note Text is Encrypted
+							Secure Notes
 							<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">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey search icon"></i> 
 								<i class="bottom left corner orange font icon"></i> 
 							</i>
-							Note Search is Encrypted
-							<div class="sub header">Easily search the contents of all your notes without compromising security.</div>
+							Private Search
+							<div class="sub header">Search the contents of all your notes without compromising security.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey share alternate icon"></i> 
 								<i class="bottom left corner share icon"></i> 
 							</i>
-							Encrypted Note Sharing
+							Encrypted Sharing
 							<div class="sub header">Shared notes are still encrypted, only readable by you and the shared users.</div>
 						</div>
 					</h2>
-					<h2 class="ui dividing header">
+					<h2 class="ui header">
 						<div class="content">
 							<i class="icons">
 								<i class="grey tv icon"></i> 
@@ -345,7 +397,7 @@
 				</div>
 
 				<div class="six wide column">
-					<img loading="lazy" width="100%" src="/api/static/assets/marketing/onboarding.svg" alt="">
+					<svg-displayer file="onboarding" alt="Observe this chart" />
 				</div>
 
 			</div>
@@ -353,8 +405,7 @@
 			
 			<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">
-					
+					<svg-displayer file="secure" alt="So dang secure" />
 				</div>
 				<div class="six wide column">
 					<h2>Only you can read your notes. </h2>
@@ -368,13 +419,13 @@
 					<h3>Works on mobile or desktop browsers. <br>Behaves like an installed app on mobile phones.</h3>
 				</div>
 				<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">
+					<svg-displayer file="cloud" alt="Girl falling into the spiral of digital chaos" />
 				</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/robot.svg" alt="Shrunken man near giant tablet">
+					<svg-displayer file="robot" alt="Murder Robot in office environment" />
 				</div>
 				<div class="six wide column">
 					<h2>Secure Data Sharing</h2>
@@ -393,7 +444,7 @@
 					<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 ">
+					<svg-displayer file="icecream" alt="Emergence of a 4th dimensional being perceived as a large ice cream" />
 				</div>
 			</div>
 
@@ -442,7 +493,12 @@
 
 			<div v-if="true" class="middle aligned centered row">
 				<div class="six wide column">
-					<h2>Solid Scribe was created by one passionate developer</h2>
+					<h3>
+						<a target="_blank" href="https://www.maxg.cc">Solid Scribe was created by Max Gialanella</a>
+					</h3>
+					<p><a target="_blank" href="https://www.maxg.cc">Check out my Resume</a></p>
+					<p>OR</p>
+					<p><a target="_blank" href="http://blog.maxg.cc">Check out my Programming Blog</a></p>
 					<p>
 						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>
@@ -450,9 +506,10 @@
 						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.
 					</p>
 					<p>
-						If you see anything broken or want to see a feature implemented, I'm open to suggestions. <i class="thumbs up icon"></i>
+						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>If you want to help me out, I would love a small Bitcoin donation.</p>
+					<p>Email me at <a href="mailto:maxgialanella@pm.me">Max.Gialanella@pm.me</a></p>
+					<p>If you want to help me out with hosting this application, 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">
@@ -461,12 +518,12 @@
 					<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">
+					<svg-displayer file="watching" alt="Drinking the blood of the elderly" />
 				</div>
 			</div>
 
 			<div class="center aligned sixteen wide column">
-				<router-link to="/terms"></i>Solid Scribe Terms of Use</router-link>
+				<router-link to="/terms">Solid Scribe Terms of Use</router-link>
 			</div>
 
 
@@ -479,11 +536,28 @@ export default {
 	name: 'WelcomePage',
 	components: {
 		'login-form':require('@/components/LoginFormComponent.vue').default,
+		'logo':require('@/components/LogoComponent.vue').default,
+		'svg-displayer':require('@/components/SvgDisplayer.vue').default,
 	},
 	data(){
 		return {
 			height: null,
 			realInformation: false,
+			jewelFacets: 15,
+			themeColors: [
+				'#21BA45', //Green
+				'#b5cc18', //Lime
+				'#00b5ad', //Teal
+				'#2185d0', //Blue
+				'#7128b9', //Violet
+				'#a333c8', //Purple
+				'#e03997', //Pink
+				'#db2828', //Red
+				'#f2711c', //Orange
+				'#fbbd08', //Yellow
+				'#767676', //Grey
+				'#303030', //Black-almost
+			],
 		}
 	},
 	beforeCreate(){
@@ -497,6 +571,40 @@ export default {
 		
 	},
 	methods: {
+		shineStyle(i){
+
+			const farMax = 95 //85
+			const farMin = 83
+
+			const farOut =  (Math.floor(Math.random() * (farMax - farMin + 1)) + farMin)
+
+			// const rotation = 360/this.jewelFacets
+			const rotMax = 360/this.jewelFacets
+			const rotMin = 320/this.jewelFacets
+			const rotation =  (Math.floor(Math.random() * (rotMax - rotMin + 1)) + rotMin)
+
+			let style = `
+				background: linear-gradient( 
+					${(i+1)*(rotation)}deg, 
+					rgba(255,255,255,0) ${farOut}%, 
+					rgba(255,255,255,0.1) ${farOut+1}%,
+					rgba(255,255,255,0.0) ${farOut+10}%
+					)
+				;`
+
+			// Remove whitespace - Make it 1 line
+			return style.replace(/\s+/g, '')
+		},
+		setAccentColor(color){
+
+			let root = document.documentElement
+			root.style.setProperty('--main-accent', color)
+			localStorage.setItem('main-accent', color)
+
+			if(!color || color == '#21BA45'){
+				localStorage.removeItem('main-accent')
+			}
+		},
 		showRealInformation(){
 
 			

client/src/pages/NotesPage.vue

@@ -4,13 +4,19 @@
 		<div class="ui grid" ref="content">
 
 			<div class="sixteen wide column">
-				<!-- :class="{ 'sixteen wide column':showOneColumn(), 'sixteen wide column':!showOneColumn() }" -->
+				<!-- :class="{ 'sixteen wide column':showOneColumn 'sixteen wide column':!showOneColumn}" -->
 				
 				<div class="ui stackable grid">
 
 					<div class="six wide column" v-if="$store.getters.totals && $store.getters.totals['totalNotes']">
 						<search-input />
 					</div>
+
+					<div class="sixteen wide column" v-if="$store.getters.totals && $store.getters.totals['showTrackMetricsButton']">
+						<router-link class="ui fluid green button" to="/metrictrack">
+							<i class="calendar check outlin icon"></i>Metric Track
+						</router-link>
+					</div>
 					
 					<div class="ten wide column" :class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
 
@@ -23,14 +29,17 @@
 						</div>
 
 						<tag-display 
+							v-if="$store.getters.totals && Object.keys($store.getters.totals['tags'] || {}).length"
+							:user-tags="$store.getters.totals['tags']"
 							:active-tags="searchTags"
 							v-on:tagClick="tagId => toggleTagFilter(tagId)"
 						/>
-						
-						<div class="ui basic shrinking icon button" v-on:click="toggleTitleView()" v-if="$store.getters.totals && $store.getters.totals['totalNotes'] > 0">
-							<i v-if="titleView" class="th icon"></i>
-							<i v-if="!titleView" class="bars icon"></i>
-						</div>
+
+						<paste-button />
+
+						<span class="ui grey text text-fix">
+							Active Sessions {{ $store.getters.getActiveSessions }}
+						</span>
 						
 					</div>
 
@@ -45,7 +54,7 @@
 
 			</div>
 
-			<div class="sixteen wide column" v-if="searchTerm.length > 0 && !loadingInProgress">
+			<div class="sixteen wide column" v-if="searchTerm.length > 0 && !showLoading">
 				<h2 class="ui header">
 					<div class="content">
 						{{ searchResultsCount.toLocaleString() }} notes with keyword "{{ searchTerm }}"
@@ -57,11 +66,15 @@
 			</div>
 
 			<div v-if="fastFilters['onlyArchived'] == 1" class="sixteen wide column">
-				<h2>Archived Notes</h2>
+				<h2>
+					<i class="green archive icon"></i>
+					Archived Notes</h2>
 			</div>
 
 			<div class="sixteen wide column" v-if="fastFilters['onlyShowTrashed'] == 1">
-				<h2>Trash
+				<h2>
+					<i class="green trash alternate outline icon"></i>
+					Trashed Notes
 					<span>({{ $store.getters.totals['trashedNotes'] }})</span>
 					<div class="ui right floated basic button" data-tooltip="This doesn't work yet">
 						<i class="poo storm icon"></i>
@@ -71,7 +84,8 @@
 			</div>
 			
 			<div class="sixteen wide column" v-if="fastFilters['onlyShowSharedNotes'] == 1">
-				<h2>Shared Notes</h2>
+				<h2><i class="green paper plane outline icon"></i>
+					Shared Notes</h2>
 			</div>
 
 			<div class="sixteen wide column" v-if="tagSuggestions.length > 0">
@@ -82,6 +96,57 @@
 				</div>
 			</div>
 
+			<!-- Note title card display  -->
+			<div class="sixteen wide column">
+
+				<h3 v-if="$store.getters.totals && $store.getters.totals['totalNotes'] == 0 && fastFilters['notesHome'] == 1">
+					No Notes Yet. <br>Thats ok.<br><br> <br>
+					<img loading="lazy" width="25%" src="/api/static/assets/marketing/hamburger.svg" alt="Create a new note"><br>
+					Create one when you feel ready.
+				</h3>
+
+				<!-- Go to one wide column, do not do this on mobile interface -->
+				<div :class="{'one-column':( showOneColumn), 'floating-list':( isFloatingList ), 'hidden-floating-list':(collapseFloatingList)}" v-on:scroll="onScroll">
+
+					
+					<div class="ui basic fitted right aligned segment" v-if="isFloatingList">
+						<div class="ui small basic green left floated button" v-on:click="closeAllNotes()" v-if="openNotes.length >= 1">
+							<i class="close icon"></i>
+							Close Notes
+						</div>
+						<div  class="ui small green button" v-on:click="collapseFloatingList = true">
+							<i class="caret square left outline icon"></i>
+							Hide List
+						</div>
+					</div>
+
+					<!-- render each section based on notes in set  -->
+					<div v-for="section,index in noteSections" v-if="section.length > 0" class="note-card-section">
+						<h5 class="ui tiny dividing header"><i :class="`green ${sectionData[index][0]} icon`"></i>{{ sectionData[index][1] }}</h5>
+
+						<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"
+								:data="note"
+								:title-view="titleView || isFloatingList"
+								:currently-open="openNotes.includes(note.id)"
+								:key="note.id + note.color + '-' +note.title.length + '-' +note.subtext.length + '-' + note.tag_count + note.updated + note.archived + note.pinned + note.trashed"
+							/>
+						</div>
+					</div>
+
+
+					<div class="loading-section" v-if="showLoading">
+						<loading-icon message="Decrypting Notes" />
+					</div>
+
+
+				</div>
+			</div>
+
 			<!-- found attachments  -->
 			<div class="sixteen wide column" v-if="foundAttachments.length > 0">
 				<h5 class="ui tiny dividing header"><i class="green folder open outline icon"></i> Files ({{ foundAttachments.length }})</h5>
@@ -93,51 +158,24 @@
 				/>
 			</div>
 
-			<!-- Note title card display  -->
-			<div class="sixteen wide column">
-
-				<h3 v-if="$store.getters.totals && $store.getters.totals['totalNotes'] == 0 && fastFilters['notesHome'] == 1">
-					No Notes Yet. <br>Thats ok.<br><br> <br>
-					<img loading="lazy" width="25%" src="/api/static/assets/marketing/hamburger.svg" alt="Create a new note"><br>
-					Create one when you feel ready.
-				</h3>
-
-				<!-- Go to one wide column, do not do this on mobile interface -->
-				<div :class="{'one-column':( showOneColumn() )}">
-
-					<!-- render each section based on notes in set  -->
-					<div v-for="section,index in noteSections" v-if="section.length > 0" class="note-card-section">
-						<h5 class="ui tiny dividing header"><i :class="`green ${sectionData[index][0]} icon`"></i>{{ sectionData[index][1] }}</h5>
-
-						<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"
-								:data="note"
-								:title-view="titleView"
-								:currently-open="activeNoteId1 == note.id"
-								:key="note.id + note.color + '-' +note.title.length + '-' +note.subtext.length + '-' + note.tag_count + note.updated"
-							/>
-						</div>
-					</div>
-
-
-					<loading-icon v-if="loadingInProgress" message="Decrypting Notes" />
-
-				</div>
-			</div>
-
 		</div>
 
-		
-		<note-input-panel 
-			v-if="activeNoteId1 != null" 
-			:key="activeNoteId1"
-			:noteid="activeNoteId1" 
-			:url-data="$route.params"
-		/>
+		<div class="show-hidden-note-list-button" 
+			v-if="collapseFloatingList && openNotes.length > 0" v-on:click="collapseFloatingList = false">
+			<i class="caret square right outline icon"></i>
+		</div>
+
+		<!-- flexbox note container evenly spaces open notes -->
+		<div class="note-panel-container" :class="{ 'note-panel-fullwidth':collapseFloatingList}" v-if="openNotes.length">
+			<note-input-panel 
+				v-for="noteId in openNotes"
+				v-if="noteId != null"
+				:key="noteId"
+				:noteid="noteId" 
+				:url-data="$route.params"
+				:open-notes="openNotes.length"
+			/>
+		</div>
 
 	</div>
 </template>
@@ -147,7 +185,7 @@
 	import axios from 'axios'
 
 	export default {
-	name: 'SearchBar',
+	name: 'NotesPage',
 		components: {
 
 			'note-input-panel': () => import(/* webpackChunkName: "NoteInputPanel" */ '@/components/NoteInputPanel.vue'),
@@ -156,9 +194,9 @@
 			// '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,
 			'tag-display':require('@/components/TagDisplayComponent.vue').default,
 			'loading-icon':require('@/components/LoadingIconComponent.vue').default,
+			'paste-button':require('@/components/PasteButton.vue').default,
 		},
 		data () {
 			return {
@@ -168,6 +206,8 @@
 				searchResultsCount: 0,
 				searchTags: [],
 				notes: [],
+				openNotes: [],
+				collapseFloatingList: false,
 				highlights: [],
 				searchDebounce: null,
 				fastFilters: {},
@@ -175,10 +215,10 @@
 
 				//Load up notes in batches
 				firstLoadBatchSize: 10, //First set of rapidly loaded notes
-				batchSize: 25, //Size of batch loaded when user scrolls through current batch
+				batchSize: 20, //Size of batch loaded when user scrolls through current batch
 				batchOffset: 0, //Tracks the current batch that has been loaded
 				loadingBatchTimeout: null, //Limit how quickly batches can be loaded
-				loadingInProgress: false,
+				showLoading: false,
 				scrollLoadEnabled: true,
 
 				//Clear button is not visible 
@@ -224,37 +264,39 @@
 
 			this.$parent.loginGateway()
 
+			//If user is on title view, 
+			this.titleView = this.$store.getters.getIsUserOnMobile
+
 			this.$io.on('new_note_created', noteId => {
 
-				//Do not update note if its open
-				if(this.activeNoteId1 != noteId){
-					this.$store.dispatch('fetchAndUpdateUserTotals')
-					this.updateSingleNote(noteId, false)
-				}
+				// Push new note to top of list and animate
+				this.updateSingleNote(noteId)
+				this.$store.dispatch('fetchAndUpdateUserTotals')
 			})
 
 			this.$io.on('note_attribute_modified', noteId => {
+
+				const drawFocus = !this.openNotes.includes(parseInt(noteId))
+				this.updateSingleNote(noteId, drawFocus)
+
 				//Do not update note if its open
-				if(this.activeNoteId1 != noteId){
+				if(this.openNotes.includes(parseInt(noteId))){
 					this.$store.dispatch('fetchAndUpdateUserTotals')
-					this.updateSingleNote(noteId, false)
 				}	
 			})
 
 			//Update title cards when new note text is saved
 			this.$io.on('new_note_text_saved', ({noteId, hash}) => {
 
-				//Do not update note if its open
-				if(this.activeNoteId1 != noteId){
-					this.updateSingleNote(noteId, true)
-				}
+				const drawFocus = !this.openNotes.includes(parseInt(noteId))
+				this.updateSingleNote(noteId, drawFocus)
 			})
 
 			this.$bus.$on('update_single_note', (noteId) => {
-				//Do not update note if its open
-				if(this.activeNoteId1 != noteId){
-					this.updateSingleNote(noteId)
-				}
+
+				const drawFocus = !this.openNotes.includes(parseInt(noteId))
+				this.updateSingleNote(noteId, drawFocus)
+				
 			})
 
 			//Update totals for app
@@ -262,19 +304,7 @@
 
 			//Close note event
 			this.$bus.$on('close_active_note', ({noteId, modified}) => {
-
-				if(modified){
-					console.log('Just closed Note -> ' + noteId + ', modified -> ',  modified)
-				}
-
-				//A note has been closed
-				if(this.$route.fullPath != '/notes'){
-					this.$router.push('/notes')
-				}
-
-				this.$store.dispatch('fetchAndUpdateUserTotals')
-				//Focus and animate if modified
-				this.updateSingleNote(noteId, modified)
+				this.closeNote(noteId, modified)
 			})
 
 			this.$bus.$on('note_deleted', (noteId) => {
@@ -321,11 +351,13 @@
 
 			//Reload page content - don't trigger if load is in progress
 			this.$bus.$on('note_reload', () => {
-				if(!this.loadingInProgress){
+				if(!this.showLoading){
 					this.reset()
 				}
 			})
 
+			// Window scroll needed when scrolling full page.
+			// second scroll event added on note-list for floating view scroll detection
 			window.addEventListener('scroll', this.onScroll)
 
 			//Close notes when back button is pressed
@@ -352,9 +384,9 @@
 		},
 		mounted() {
 
-			//Open note on load if ID is set
+			//Open note on PAGE LOAD if ID is set
 			if(this.$route.params.id > 1){
-				this.activeNoteId1 = this.$route.params.id
+				this.openNote(this.$route.params.id)
 			}
 
 			//Loads initial batch and tags
@@ -363,34 +395,123 @@
 		},
 		watch: {
 			'$route.params.id': function(id){
-				//Open note on ID, null id will close note
-				this.activeNoteId1 = id
+				this.openNote(id)
+			},
+			'$route' (to, from) {
+
+
+				// Reload the notes if returning to this page
+				if(to.fullPath == '/notes' && !from.fullPath.includes('/notes/open/')){
+					this.reset()
+				}
+
+				// Close all notes if returning to /notes page
+				if(to.fullPath == '/notes' && from.fullPath.includes('/notes/open/')){
+					this.closeAllNotes()
+				}
+
+				//Lookup tags set in URL
+				if(to.params.tag && this.$store.getters.totals && this.$store.getters.totals['tags'][to.params.tag]){
+
+					//Lookup tag in store by string
+					const tagObject = this.$store.getters.totals['tags'][to.params.tag]
+
+					//Pull key out of string and load tags for that key
+					this.toggleTagFilter(tagObject.id)
+					return
+				}
 			}
 		},
-		methods: {
-			toggleTitleView(){
-				this.titleView = !this.titleView
+		computed: {
+			isFloatingList(){
+
+				//If note 1 or 2 is open, show floating column
+				return (this.openNotes.length > 0)
+
 			},
 			showOneColumn(){
 
 				return this.$store.getters.getIsUserOnMobile
 
-				//If note 1 or 2 is open, show one column. Or if the user is on mobile
-				return (this.activeNoteId1 != null || this.activeNoteId2 != null) &&
-						!this.$store.getters.getIsUserOnMobile
-			},
+			}
+		},
+		methods: {
 			openNote(id, event = null){
 
+				// 
+
+				const intId = parseInt(id)
+				if(this.openNotes.includes(intId)){
+
+					console.log('Open already open note?')
+
+					// const openIndex = this.openNotes.indexOf(intId)
+					// if(openIndex != -1){
+					// 	console.log('Open note and remove it ', intId + ' on index ' + openIndex)
+					// 	this.openNotes.splice(openIndex, 1)
+					// }
+					// this.$bus.$emit('close_note_by_id', intId)
+					return
+				}
+
 				//Don't open note if a link is clicked in display card
 				if(event && event.target && event.target.nodeName){
 					const nodeClick = event.target.nodeName
 					if(nodeClick == 'A'){ return }	
 				}
 
-				//Open note if a link was not clicked
-				this.$router.push('/notes/open/'+id)
+				// Push note to stack if not open
+				if(Number.isInteger(intId) && !this.openNotes.includes(intId)){
+					this.openNotes.push(intId)
+				}
+
+				this.$nextTick(() => {
+					// change route if open ID is not the same as current ID
+					if(this.$route.params.id != id){
+						console.log('Open note, change route -> route id ' + this.$route.params.id + ' note id ->' + id + ', ' +(this.$route.params.id == id))
+						this.$router.push('/notes/open/'+id)
+					}
+				})
+
+				
+				
 				return
 			},
+			closeNote(noteId, modified){
+
+				console.log('close note', this.$route.fullPath)
+
+				const openIndex = this.openNotes.indexOf(noteId)
+				if(openIndex != -1){
+					console.log('Removing note id ', noteId + ' on index ' + openIndex)
+					this.openNotes.splice(openIndex, 1)
+				}
+
+				// //A note has been closed
+				// if(this.$route.fullPath != '/notes'){
+				// 	this.$router.push('/notes')
+				// }
+				if(this.openNotes.length == 0 && this.$route.fullPath != '/notes'){
+					this.$router.push('/notes')
+				}
+
+				if(modified){
+					console.log('Just closed Note -> ' + noteId + ', modified -> ',  modified)
+					this.$store.dispatch('fetchAndUpdateUserTotals')
+					//Focus and animate if modified
+					this.updateSingleNote(noteId, modified)
+				}
+
+				console.log('closeNote(): Open notes length ', this.openNotes.length)
+			},
+			closeAllNotes(){
+				console.log('Close all notes ------------')
+				for (let i = this.openNotes.length - 1; i >= 0; i--) {
+					console.log('Close all notes -> ' + this.openNotes[i])
+					this.closeNote(this.openNotes[i])
+				}
+				console.log('----------------')
+			},
 			toggleTagFilter(tagId){
 
 				this.searchTags = [tagId]
@@ -407,6 +528,10 @@
 			},
 			onScroll(e){
 
+				if(!this.scrollLoadEnabled){
+					return
+				}
+
 				clearTimeout(this.loadingBatchTimeout)
 				this.loadingBatchTimeout = setTimeout(() => {
 
@@ -416,12 +541,12 @@
 					const height = document.getElementById('app').scrollHeight
 
 					//Load if less than 500px from the bottom
-					if(((height - scrolledDown) < 500) && this.scrollLoadEnabled && !this.loadingInProgress){
+					if(((height - scrolledDown) < 500) && this.scrollLoadEnabled){
 						
-						this.search(false, this.batchSize, true)
+						this.search(true, this.batchSize, true)
 					}
 
-				}, 30)
+				}, 50)
 
 				
 				return
@@ -442,21 +567,24 @@
 				}
 
 				this.lastVisibilityState = document.visibilityState
-
 			},
 			// @TODO Don't even trigger this if the note wasn't changed
 			updateSingleNote(noteId, focuseAndAnimate = true){
 
+				console.log('updating single note', noteId)
+
 				noteId = parseInt(noteId)
 
 				//Find local note, if it exists; continue
 				let note = null
-				if(this.$refs['note-'+noteId] && this.$refs['note-'+noteId][0] && this.$refs['note-'+noteId][0].note){
+				if(this.$refs['note-'+noteId]?.[0]?.note){
 					note = this.$refs['note-'+noteId][0].note
 					//Show that note is working on updating
 					this.$refs['note-'+noteId][0].showWorking = true
 				}
 
+				this.rebuildNoteCategorise()
+				// return
 
 				//Lookup one note using passed in ID
 				const postData = {
@@ -478,6 +606,7 @@
 						return
 					}
 
+					// if old note data and new note data exists
 					if(note && newNote){
 
 						//go through each prop and update it with new values
@@ -486,7 +615,7 @@
 						})
 
 						//Push new note to front if its modified or we want it to
-						if( focuseAndAnimate || note.updated != newNote.updated ){
+						if( note.updated != newNote.updated ){
 
 							// Find note, in section, move to front
 							Object.keys(this.noteSections).forEach( key => {
@@ -500,6 +629,9 @@
 								})
 							})
 
+						}
+
+						if( focuseAndAnimate ){
 							this.$nextTick( () => {
 								//Trigger close animation on note
 								this.$refs['note-'+noteId][0].justClosed()
@@ -542,19 +674,14 @@
 				return new Promise((resolve, reject) => {
 
 					//Don't double load note batches
-					if(this.loadingInProgress){
+					if(this.showLoading){
 						console.log('Loading already in progress')
 						return resolve(false)
 					}
 
-					//Reset a lot of stuff if we are not merging batches
 					if(!mergeExisting){
-						Object.keys(this.noteSections).forEach( key => {
-							this.noteSections[key] = []
-						})
-						this.batchOffset = 0 // Reset batch offset if we are not merging note batches
+						this.batchOffset = 0 // Reset batch offset if we are not merging note batches or new set will be offset from current and overwrite current set with second batch
 					}
-					this.searchResultsCount = 0
 
 					//Remove all filter limits from previous queries
 					delete this.fastFilters.limitSize
@@ -582,25 +709,40 @@
 					}
 
 					//Perform search - or die
-					this.loadingInProgress = true
+					this.showLoading = showLoading
+					this.scrollLoadEnabled = false
 					axios.post('/api/note/search', postData)
 					.then(response => {
 
+						//Reset a lot of stuff if we are not merging batches
+						if(!mergeExisting){
+							Object.keys(this.noteSections).forEach( key => {
+								this.noteSections[key] = []
+							})
+						}
+						this.searchResultsCount = 0
+
 						// console.timeEnd('Fetch TitleCard Batch '+notesInNextLoad)
 
 						//Save the number of notes just loaded
 						this.batchOffset += response.data.notes.length
 
-						//Enable or disable scroll loading
+						//Enable scroll loading if endpoint retured notes
 						this.scrollLoadEnabled = response.data.notes.length > 0
 
 						if(response.data.total > 0){
 							this.searchResultsCount = response.data.total
 						}
 						
-						this.loadingInProgress = false
+						this.showLoading = false
 						this.generateNoteCategories(response.data.notes, mergeExisting)
 
+						//cache initial notes for faster reloads
+						if(!mergeExisting && this.showClear == false){
+							const cachedNotesJson = JSON.stringify(response.data.notes)
+							localStorage.setItem('snippetCache', cachedNotesJson)
+						}
+
 						return resolve(true)
 					})
 					.catch(error => { this.$bus.$emit('notification', 'Failed to Search Notes') })
@@ -715,7 +857,7 @@
 				//clear out tags
 				this.searchTags = []
 				this.tagSuggestions = []
-				this.loadingInProgress = false
+				this.showLoading = false
 				this.searchTerm = ''
 				this.$bus.$emit('reset_fast_filters') //Clear out search
 
@@ -732,15 +874,32 @@
 				filter[options[index]] = 1
 
 				this.fastFilters = filter
+
+				//If notes exist in cache, load them up
+				let showLoading = true
+				const cachedNotesJson = localStorage.getItem('snippetCache')
+				const cachedNotes = JSON.parse(cachedNotesJson)
+				if(cachedNotes && cachedNotes.length > 0 && !this.showClear){
+
+					//Load cache. do not merge existing
+					this.generateNoteCategories(cachedNotes, false)
+					showLoading = false
+				}
+
 				//Fetch First batch of notes with new filter
-				this.search(true, this.firstLoadBatchSize, false)
-				.then( r => this.search(false, this.batchSize, true))
+				this.search(showLoading, this.batchSize, false)
+				// .then( r => this.search(false, this.batchSize, true))
 			}
 		}
 	}
 </script>
 <style type="text/css" scoped>
 
+	.text-fix {
+		padding: 8px 0 0 15px;
+		display: inline-block;
+		color: var(--menu-accent);
+	}
 	.detail {
 		float: right;
 	}
@@ -758,4 +917,150 @@
 	.note-card-section + .note-card-section {
 		padding: 15px 0 0;
 	}
+	.loading-section {
+		color: var(--main-accent);
+		box-shadow: 0 1px 3px 0 var(--main-accent);
+		border-radius: 6px;
+		background-color: var(--small_element_bg_color);
+		display: inline-block;
+		width: 100%;
+		margin: 15px 0;
+	}
+	.floating-list {
+		z-index: 1000;
+		position: fixed;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 25%;
+		height: 100vh;
+		background-color: var(--small_element_bg_color);
+		padding: 15px 5px 0px 10px;
+		overflow-y: scroll;
+		overflow-x: hidden;
+		-ms-overflow-style: none;  /* Internet Explorer 10+ */
+	    scrollbar-width: none;  /* Firefox */
+	    background-color: var(--border_color);
+	}
+	.floating-list::-webkit-scrollbar { 
+	    display: none;  /* Safari and Chrome */
+	}
+	.note-panel-container {
+		position: fixed;
+		width: 75%;
+		height: 100vh;
+		background: gray;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 1000;
+
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: center;
+		align-items: stretch;
+		align-content: stretch;
+
+		z-index: 1000;
+	}
+	.note-panel-fullwidth {
+		width: 100% !important;
+	}
+
+	.note-panel-container > div {
+		flex: 1;
+		position: relative;
+	}
+	.hidden-floating-list {
+		left: -1000px !important;
+	}
+	.show-hidden-note-list-button {
+		position: fixed;
+		top: 25px;
+		left: 0;
+		min-width: 45px;
+		background-color: var(--main-accent);
+		color: var(--text_color);
+		display: block;
+		z-index: 1100;
+		cursor: pointer;
+		border-bottom-right-radius: 5px;
+		border-top-right-radius: 5px;
+		padding: 8px 0px 8px 13px;
+		text-align: left;
+		font-size: 1.4em;
+	}
+
+	@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ 
+		.floating-list {
+			left: -1000px;
+		}
+		.note-panel-container {
+			width: 100%;
+		}
+	}
+	@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
+		.floating-list {
+			left: 0px;
+		}
+		.note-panel-container {
+			width: 75%;
+		}
+	}
+	@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
+
+	}
+	@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
+
+	}
+	@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
+
+	}
+	@media (min-width:1281px) { /* hi-res laptops and desktops */ 
+
+	}
+	@media (min-width:2000px) { /* BIG hi-res laptops and desktops */ 
+		.floating-list {
+			left: 180px;
+			width: calc(30% - 180px);
+		}
+		.note-panel-container {
+			width: 70%;
+		}
+	}
+
+	.master-note-edit {
+		position: absolute;
+		width: 100%;
+		background: var(--small_element_bg_color);
+		left: 0;
+		top: 0;
+		bottom: 0;
+		overflow: hidden;
+	}
+	.master-note-edit + .master-note-edit {
+		border-left: 2px solid var(--main-accent);
+		border-left: 5px solid var(--border_color);
+	}
+
+	
+
+
+
+/*html, body {
+  height: 100%;
+}
+
+.wrap {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}*/
+
+
+
+
+
 </style>

client/src/pages/OverviewPage.vue

@@ -0,0 +1,761 @@
+<template>
+	<div class="page-container">
+		
+		<div class="ui grid" ref="content">
+
+			<div class="sixteen wide column">
+				<!-- :class="{ 'sixteen wide column':showOneColumn(), 'sixteen wide column':!showOneColumn() }" -->
+				
+				<div class="ui stackable grid">
+
+					<div class="six wide column" v-if="$store.getters.totals && $store.getters.totals['totalNotes']">
+						<search-input />
+					</div>
+					
+					<div class="ten wide column" :class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
+
+						<div class="ui basic button shrinking" 
+						v-on:click="updateFastFilters(3)" 
+						v-if="$store.getters.totals && ($store.getters.totals['youGotMailCount'] > 0)" 
+						style="position: relative;">
+							<i class="green mail icon"></i>Inbox
+							<span class="tiny circular floating ui green label">+{{ $store.getters.totals['youGotMailCount'] }}</span>
+						</div>
+
+						<tag-display 
+							:active-tags="searchTags"
+							v-on:tagClick="tagId => toggleTagFilter(tagId)"
+						/>
+						
+						<div class="ui basic shrinking icon button" v-on:click="toggleTitleView()" v-if="$store.getters.totals && $store.getters.totals['totalNotes'] > 0">
+							<i v-if="titleView" class="th icon"></i>
+							<i v-if="!titleView" class="bars icon"></i>
+						</div>
+						
+					</div>
+
+					<div class="eight wide column" v-if="showClear">
+						<!-- <fast-filters /> -->
+						<span class="ui fluid green button" @click="reset">
+							<i class="arrow circle left icon"></i>Show All Notes
+						</span>
+					</div>
+
+				</div>
+
+			</div>
+
+			<div class="sixteen wide column" v-if="searchTerm.length > 0 && !loadingInProgress">
+				<h2 class="ui header">
+					<div class="content">
+						{{ searchResultsCount.toLocaleString() }} notes with keyword "{{ searchTerm }}"
+						<div v-if="searchResultsCount == 0" class="sub header">
+							Search can only find key words. Try a single word search.
+						</div>
+					</div>
+				</h2>
+			</div>
+
+			<div v-if="fastFilters['onlyArchived'] == 1" class="sixteen wide column">
+				<h2>Archived Notes</h2>
+			</div>
+
+			<div class="sixteen wide column" v-if="fastFilters['onlyShowTrashed'] == 1">
+				<h2>Trash
+					<span>({{ $store.getters.totals['trashedNotes'] }})</span>
+					<div class="ui right floated basic button" data-tooltip="This doesn't work yet">
+						<i class="poo storm icon"></i>
+						Empty Trash
+					</div>
+				</h2>
+			</div>
+			
+			<div class="sixteen wide column" v-if="fastFilters['onlyShowSharedNotes'] == 1">
+				<h2>Shared Notes</h2>
+			</div>
+
+			<div class="sixteen wide column" v-if="tagSuggestions.length > 0">
+				<h5 class="ui tiny dividing header"><i class="green tags icon"></i> Tags ({{ tagSuggestions.length }})</h5>
+				<div class="ui clickable green label" v-for="tag in tagSuggestions" v-on:click="tagId => toggleTagFilter(tag.id)">
+					<i class="tag icon"></i>
+					{{ tag.text }}
+				</div>
+			</div>
+
+			<!-- found attachments  -->
+			<div class="sixteen wide column" v-if="foundAttachments.length > 0">
+				<h5 class="ui tiny dividing header"><i class="green folder open outline icon"></i> Files ({{ foundAttachments.length }})</h5>
+				<attachment-display 
+					v-for="item in foundAttachments" 
+					:item="item"
+					:key="item.id"
+					:search-params="{}"
+				/>
+			</div>
+
+			<!-- Note title card display  -->
+			<div class="sixteen wide column">
+
+				<h3 v-if="$store.getters.totals && $store.getters.totals['totalNotes'] == 0 && fastFilters['notesHome'] == 1">
+					No Notes Yet. <br>Thats ok.<br><br> <br>
+					<img loading="lazy" width="25%" src="/api/static/assets/marketing/hamburger.svg" alt="Create a new note"><br>
+					Create one when you feel ready.
+				</h3>
+
+				<!-- Go to one wide column, do not do this on mobile interface -->
+				<div :class="{'one-column':( showOneColumn() )}">
+
+					<!-- render each section based on notes in set  -->
+					<div v-for="section,index in noteSections" v-if="section.length > 0" class="note-card-section">
+						<h5 class="ui tiny dividing header"><i :class="`green ${sectionData[index][0]} icon`"></i>{{ sectionData[index][1] }}</h5>
+
+						<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"
+								:data="note"
+								:title-view="titleView"
+								:currently-open="activeNoteId1 == note.id"
+								:key="note.id + note.color + '-' +note.title.length + '-' +note.subtext.length + '-' + note.tag_count + note.updated"
+							/>
+						</div>
+					</div>
+
+
+					<loading-icon v-if="loadingInProgress" message="Decrypting Notes" />
+
+				</div>
+			</div>
+
+		</div>
+
+		
+		<note-input-panel 
+			v-if="activeNoteId1 != null" 
+			:key="activeNoteId1"
+			:noteid="activeNoteId1" 
+			:url-data="$route.params"
+		/>
+
+	</div>
+</template>
+
+<script>
+	
+	import axios from 'axios'
+
+	export default {
+	name: 'SearchBar',
+		components: {
+
+			'note-input-panel': () => import(/* webpackChunkName: "NoteInputPanel" */ '@/components/NoteInputPanel.vue'),
+
+			'note-title-display-card': require('@/components/NoteTitleDisplayCard.vue').default,
+			// '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,
+			'tag-display':require('@/components/TagDisplayComponent.vue').default,
+			'loading-icon':require('@/components/LoadingIconComponent.vue').default,
+		},
+		data () {
+			return {
+				initComponent: true,
+				tagSuggestions:[],
+				searchTerm: '',
+				searchResultsCount: 0,
+				searchTags: [],
+				notes: [],
+				highlights: [],
+				searchDebounce: null,
+				fastFilters: {},
+				titleView: false,
+
+				//Load up notes in batches
+				firstLoadBatchSize: 10, //First set of rapidly loaded notes
+				batchSize: 25, //Size of batch loaded when user scrolls through current batch
+				batchOffset: 0, //Tracks the current batch that has been loaded
+				loadingBatchTimeout: null, //Limit how quickly batches can be loaded
+				loadingInProgress: false,
+				scrollLoadEnabled: true,
+
+				//Clear button is not visible 
+				showClear: false,
+				initialPostData: null,
+
+				//Currently open notes in app
+				activeNoteId1: null,
+				activeNoteId2: null,
+
+				//Position determines how note is Positioned
+				activeNote1Position: 0,
+				activeNote2Position: 0,
+
+				lastVisibilityState: null,
+
+				foundAttachments: [],
+
+				sectionData: {
+					'pinned': 		['thumbtack', 'Pinned'],
+					'archived': 	['archive', 'Archived'],
+					'shared': 		['envelope outline', 'Inbox'],
+					'sent': 		['paper plane outline', 'Sent Notes'],
+					'notes': 		['file','Notes'],
+					'highlights': 	['paragraph', 'Found In Text'],
+					'trashed': 		['poop', 'Trashed Notes'],
+					'tagged': 		['tag', 'Tagged'],
+				},
+				noteSections: {
+					pinned: [],
+					archived: [],
+					shared:[],
+					sent:[],
+					notes: [],
+					highlights: [],
+					trashed: [],
+					tagged:[],
+				},
+
+			}
+		},
+		beforeMount(){
+
+			this.$parent.loginGateway()
+
+			this.$io.on('new_note_created', noteId => {
+
+				//Do not update note if its open
+				if(this.activeNoteId1 != noteId){
+					this.$store.dispatch('fetchAndUpdateUserTotals')
+					this.updateSingleNote(noteId, false)
+				}
+			})
+
+			this.$io.on('note_attribute_modified', noteId => {
+				//Do not update note if its open
+				if(this.activeNoteId1 != noteId){
+					this.$store.dispatch('fetchAndUpdateUserTotals')
+					this.updateSingleNote(noteId, false)
+				}	
+			})
+
+			//Update title cards when new note text is saved
+			this.$io.on('new_note_text_saved', ({noteId, hash}) => {
+
+				//Do not update note if its open
+				if(this.activeNoteId1 != noteId){
+					this.updateSingleNote(noteId, true)
+				}
+			})
+
+			this.$bus.$on('update_single_note', (noteId) => {
+				//Do not update note if its open
+				if(this.activeNoteId1 != noteId){
+					this.updateSingleNote(noteId)
+				}
+			})
+
+			//Update totals for app
+			this.$store.dispatch('fetchAndUpdateUserTotals')
+
+			//Close note event
+			this.$bus.$on('close_active_note', ({noteId, modified}) => {
+
+				if(modified){
+					console.log('Just closed Note -> ' + noteId + ', modified -> ',  modified)
+				}
+
+				//A note has been closed
+				if(this.$route.fullPath != '/notes'){
+					this.$router.push('/notes')
+				}
+
+				this.$store.dispatch('fetchAndUpdateUserTotals')
+				//Focus and animate if modified
+				this.updateSingleNote(noteId, modified)
+			})
+
+			this.$bus.$on('note_deleted', (noteId) => {
+				//Remove deleted note from set, its deleted
+				
+				Object.keys(this.noteSections).forEach( key => {
+					this.noteSections[key].forEach( (note, index) => {
+						if(note.id == noteId){
+							this.noteSections[key].splice(index,1)
+							this.$store.dispatch('fetchAndUpdateUserTotals')
+							return
+						}
+					})
+				})
+			})
+
+			this.$bus.$on('update_fast_filters', filterIndex => {
+
+				this.updateFastFilters(filterIndex)
+			})
+
+			//Event to update search from other areas
+			this.$bus.$on('update_search_term', sentInSearchTerm => {
+				this.searchTerm = sentInSearchTerm
+				this.search(true, this.batchSize)
+					.then( () => {
+
+						this.searchAttachments()
+
+						const postData = {
+							'tagText':this.searchTerm.trim()
+						}
+
+						this.tagSuggestions = []
+						axios.post('/api/tag/suggest', postData)
+						.then( response => {
+
+							this.tagSuggestions = response.data
+						})
+
+						// return 
+					})
+			})
+
+			//Reload page content - don't trigger if load is in progress
+			this.$bus.$on('note_reload', () => {
+				if(!this.loadingInProgress){
+					this.reset()
+				}
+			})
+
+			window.addEventListener('scroll', this.onScroll)
+
+			//Close notes when back button is pressed
+			// window.addEventListener('hashchange', this.hashChangeAction)
+
+			//update note on visibility change
+			// document.addEventListener('visibilitychange', this.visibiltyChangeAction);
+
+		},
+		beforeDestroy(){
+			window.removeEventListener('scroll', this.onScroll)
+			// document.removeEventListener('visibilitychange', this.visibiltyChangeAction)
+
+			this.$bus.$off('note_reload')
+			this.$bus.$off('close_active_note')
+			// this.$bus.$off('update_single_note')
+			this.$bus.$off('note_deleted')
+			this.$bus.$off('update_fast_filters')
+			this.$bus.$off('update_search_term')
+
+			//We want to remove event listeners, but something here is messing them up and preventing ALL event listeners from working
+			// this.$off() // Remove all event listeners
+			// this.$bus.$off()
+		},
+		mounted() {
+
+			//Open note on load if ID is set
+			if(this.$route.params.id > 1){
+				this.activeNoteId1 = this.$route.params.id
+			}
+
+			//Loads initial batch and tags
+			this.reset()
+
+		},
+		watch: {
+			'$route.params.id': function(id){
+				//Open note on ID, null id will close note
+				this.activeNoteId1 = id
+			}
+		},
+		methods: {
+			toggleTitleView(){
+				this.titleView = !this.titleView
+			},
+			showOneColumn(){
+
+				return this.$store.getters.getIsUserOnMobile
+
+				//If note 1 or 2 is open, show one column. Or if the user is on mobile
+				return (this.activeNoteId1 != null || this.activeNoteId2 != null) &&
+						!this.$store.getters.getIsUserOnMobile
+			},
+			openNote(id, event = null){
+
+				//Don't open note if a link is clicked in display card
+				if(event && event.target && event.target.nodeName){
+					const nodeClick = event.target.nodeName
+					if(nodeClick == 'A'){ return }	
+				}
+
+				//Open note if a link was not clicked
+				this.$router.push('/notes/open/'+id)
+				return
+			},
+			toggleTagFilter(tagId){
+
+				this.searchTags = [tagId]
+
+				//Reset note set and load up notes and tags
+				if(this.searchTags.length > 0){
+					this.search(true, this.batchSize)
+					return
+				}
+
+				//If no tags are selected, reset entire page
+				this.reset()
+
+			},
+			onScroll(e){
+
+				clearTimeout(this.loadingBatchTimeout)
+				this.loadingBatchTimeout = setTimeout(() => {
+
+					//Detect distance scrolled down the page
+					const scrolledDown = window.pageYOffset + window.innerHeight
+					//Get height of div to properly detect scroll distance down
+					const height = document.getElementById('app').scrollHeight
+
+					//Load if less than 500px from the bottom
+					if(((height - scrolledDown) < 500) && this.scrollLoadEnabled && !this.loadingInProgress){
+						
+						this.search(false, this.batchSize, true)
+					}
+
+				}, 30)
+
+				
+				return
+			},
+			visibiltyChangeAction(event){
+
+				//Fuck this shit, just use web sockets
+				return
+
+				//@TODO - phase this out, update it via socket.io
+				//If user leaves page then returns to page, reload the first batch
+				if(this.lastVisibilityState == 'hidden' && document.visibilityState == 'visible'){
+					//Load initial batch, then tags, then other batch
+					this.search(false, this.firstLoadBatchSize)
+					.then( () => {
+						// return 
+					})
+				}
+
+				this.lastVisibilityState = document.visibilityState
+
+			},
+			// @TODO Don't even trigger this if the note wasn't changed
+			updateSingleNote(noteId, focuseAndAnimate = true){
+
+				noteId = parseInt(noteId)
+
+				//Find local note, if it exists; continue
+				let note = null
+				if(this.$refs['note-'+noteId] && this.$refs['note-'+noteId][0] && this.$refs['note-'+noteId][0].note){
+					note = this.$refs['note-'+noteId][0].note
+					//Show that note is working on updating
+					this.$refs['note-'+noteId][0].showWorking = true
+				}
+
+
+				//Lookup one note using passed in ID
+				const postData = {
+					searchQuery: this.searchTerm,
+					searchTags: this.searchTags,
+					fastFilters:{
+						noteIdSet:[noteId]
+					}
+				}
+
+				//Note data must be fetched, then sorted into existing note data
+				axios.post('/api/note/search', postData)
+				.then(results => {
+
+					//Pull note data out of note set
+					let newNote = results.data.notes[0]
+
+					if(newNote === undefined){
+						return
+					}
+
+					if(note && newNote){
+
+						//go through each prop and update it with new values
+						Object.keys(newNote).forEach(prop => {
+							note[prop] = newNote[prop]
+						})
+
+						//Push new note to front if its modified or we want it to
+						if( focuseAndAnimate || note.updated != newNote.updated ){
+
+							// Find note, in section, move to front
+							Object.keys(this.noteSections).forEach( key => {
+								this.noteSections[key].forEach( (searchNote, index) => {
+									if(searchNote.id == noteId){
+										//Remove note from location and push to front
+										this.noteSections[key].splice(index, 1)
+										this.noteSections[key].unshift(note)
+										return
+									}
+								})
+							})
+
+							this.$nextTick( () => {
+								//Trigger close animation on note
+								this.$refs['note-'+noteId][0].justClosed()
+								this.$refs['note-'+noteId][0].showWorking = false
+							})
+						}
+
+					}
+
+					//New notes don't exist in list, push them to the front
+					if(note == null){
+						this.noteSections.notes.unshift(newNote)
+						//Trigger close animation on note
+						if(this.$refs['note-'+noteId] && this.$refs['note-'+noteId][0]){
+							this.$refs['note-'+noteId][0].justClosed()
+							this.$refs['note-'+noteId][0].showWorking = false
+						}
+					}
+
+					if(this.$refs['note-'+noteId] && this.$refs['note-'+noteId][0]){
+						this.$refs['note-'+noteId][0].showWorking = false
+					}
+
+					//Trigger section rebuild
+					this.rebuildNoteCategorise()
+				})
+				.catch(error => { 
+					console.log(error)
+					this.$bus.$emit('notification', 'Failed to Update Note') 
+				})
+			},
+			searchAttachments(){
+				axios.post('/api/attachment/textsearch', {'searchTerm':this.searchTerm})
+				.then(results => {
+					this.foundAttachments = results.data
+				})
+				.catch(error => { this.$bus.$emit('notification', 'Failed to Search Attachments') })
+			},
+			search(showLoading = true, notesInNextLoad = 10, mergeExisting = false){
+				return new Promise((resolve, reject) => {
+
+					//Don't double load note batches
+					if(this.loadingInProgress){
+						console.log('Loading already in progress')
+						return resolve(false)
+					}
+
+					//Reset a lot of stuff if we are not merging batches
+					if(!mergeExisting){
+						Object.keys(this.noteSections).forEach( key => {
+							this.noteSections[key] = []
+						})
+						this.batchOffset = 0 // Reset batch offset if we are not merging note batches
+					}
+					this.searchResultsCount = 0
+
+					//Remove all filter limits from previous queries
+					delete this.fastFilters.limitSize
+					delete this.fastFilters.limitOffset
+
+					let postData = {
+						searchQuery: this.searchTerm,
+						searchTags: this.searchTags,
+						fastFilters: this.fastFilters,
+					}
+
+					//Save initial post data on first load
+					if(this.initialPostData == null){
+						this.initialPostData = JSON.stringify(postData)
+					}
+					//If post data is not the same as initial, show clear button
+					if(JSON.stringify(postData) != this.initialPostData){
+						this.showClear = true
+					}
+
+					if(notesInNextLoad && notesInNextLoad > 0){
+						//Create limit based off of the number of notes already loaded
+						postData.fastFilters.limitSize = notesInNextLoad
+						postData.fastFilters.limitOffset = this.batchOffset
+					}
+
+					//Perform search - or die
+					this.loadingInProgress = true
+					axios.post('/api/note/search', postData)
+					.then(response => {
+
+						// console.timeEnd('Fetch TitleCard Batch '+notesInNextLoad)
+
+						//Save the number of notes just loaded
+						this.batchOffset += response.data.notes.length
+
+						//Enable or disable scroll loading
+						this.scrollLoadEnabled = response.data.notes.length > 0
+
+						if(response.data.total > 0){
+							this.searchResultsCount = response.data.total
+						}
+						
+						this.loadingInProgress = false
+						this.generateNoteCategories(response.data.notes, mergeExisting)
+
+						return resolve(true)
+					})
+					.catch(error => { this.$bus.$emit('notification', 'Failed to Search Notes') })
+				})
+			},
+			rebuildNoteCategorise(){
+				let currentNotes = []
+				Object.keys(this.noteSections).forEach( key => {
+					this.noteSections[key].forEach( note => {
+						currentNotes.push(note)
+					})
+				})
+				this.generateNoteCategories(currentNotes, false)
+			},
+			generateNoteCategories(notes, mergeExisting){
+				// Place each note in a category based on certain attributes and fast filters
+
+				//Reset all sections if we are not merging existing
+				if(!mergeExisting){
+					Object.keys(this.noteSections).forEach( key => {
+						this.noteSections[key] = []
+					})
+				}
+
+				//Sort notes into defined sections
+				notes.forEach(note => {
+
+					if(this.searchTerm.length > 0){
+						if(note.pinned == 1){
+							this.noteSections.pinned.push(note)
+							return
+						}
+
+						//Push to default note section 
+						this.noteSections.notes.push(note)
+						return
+					}
+
+					//Display all tags in tag section
+					if(this.searchTags.length >= 1){
+						this.noteSections.tagged.push(note)
+						return
+					}
+
+					//Only show trashed notes when trashed
+					if(this.fastFilters.onlyShowTrashed == 1){
+
+						if(note.trashed == 1){
+							this.noteSections.trashed.push(note)
+						}
+						return
+					}
+					if(note.trashed == 1){
+						return
+					}
+
+					//Show archived notes
+					if(this.fastFilters.onlyArchived == 1){
+
+						if(note.pinned == 1 && note.archived == 1){
+							this.noteSections.pinned.push(note)
+							return
+						}
+						if(note.archived == 1){
+							this.noteSections.archived.push(note)
+						}
+						return
+					}
+					if(note.archived == 1){ return }
+
+					//Only show sent notes section if shared is selected
+					if(this.fastFilters.onlyShowSharedNotes == 1){
+
+						if(note.shared == 2){
+							this.noteSections.sent.push(note)
+						}
+						if(note.shareUsername != null){
+							this.noteSections.shared.push(note)
+						}
+						return
+					}
+					//Show shared notes on main list but not notes shared with you
+					if(note.shareUsername != null){ return }
+
+					// Pinned notes are always first, they can appear in the archive
+					if(note.pinned == 1){
+						this.noteSections.pinned.push(note)
+						return
+					}
+
+					//Push to default note section 
+					this.noteSections.notes.push(note)
+					
+					return
+				})
+
+			},
+			reset(){
+				this.showClear = false
+				this.scrollLoadEnabled = true
+				this.searchTerm = ''
+				this.searchTags = []
+				this.tagSuggestions = []
+				this.fastFilters = {}
+				this.foundAttachments = [] //Remove all attachments 
+
+				this.updateFastFilters(5) //This loads notes
+				
+			},
+			updateFastFilters(index){
+
+				//clear out tags
+				this.searchTags = []
+				this.tagSuggestions = []
+				this.loadingInProgress = false
+				this.searchTerm = ''
+				this.$bus.$emit('reset_fast_filters') //Clear out search
+
+				const options = [
+					'withLinks', // 'Only Show Notes with Links'
+					'withTags', // 'Only Show Notes with Tags'
+					'onlyArchived', //'Only Show Archived Notes'
+					'onlyShowSharedNotes', //Only show shared notes
+					'onlyShowTrashed',
+					'notesHome',
+				]
+
+				let filter = {}
+				filter[options[index]] = 1
+
+				this.fastFilters = filter
+				//Fetch First batch of notes with new filter
+				this.search(true, this.firstLoadBatchSize, false)
+				.then( r => this.search(false, this.batchSize, true))
+			}
+		}
+	}
+</script>
+<style type="text/css" scoped>
+
+	.detail {
+		float: right;
+	}
+	.note-card-display-area {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.display-area-title {
+		width: 100%;
+		display: inline-block;
+	}
+	.note-card-section {
+		/*padding-bottom: 15px;*/
+	}
+	.note-card-section + .note-card-section {
+		padding: 15px 0 0;
+	}
+</style>

client/src/pages/SettingsPage.vue

@@ -49,7 +49,7 @@
 		<div class="ui segment">
 			<div class="ui stackable grid">
 				<div class="six wide column">
-					<p>1. Enter Password and get QR</p>
+					<div class="ui tiny dividing header">1. Enter Password and get QR</div>
 					<div class="ui fluid action input">
 						<input type="password" placeholder="Current Password" v-model="password">
 
@@ -62,12 +62,12 @@
 					</div>
 				</div>
 				<div class="four wide column">
-					<p>2. Scan QR Code</p>
+					<div class="ui tiny dividing header">2. Scan QR Code</div>
 					<p v-if="qrCode == ''">(QR Code will appear here)</p>
-					<img v-if="qrCode != ''" :src="qrCode" alt="QR Code">
+					<img v-if="qrCode != ''" :src="qrCode" class="ui image" alt="QR Code">
 				</div>
 				<div class="six wide column">
-					<p>3. Verify with code</p>
+					<div class="ui tiny dividing header">3. Verify with code</div>
 					<div class="ui fluid action input" v-if="qrCode != ''">
 						<input type="text" placeholder="Verification Code" v-model="verificationToken" v-on:keyup.enter="verifyQrCode()">
 						<div class="ui green button">

client/src/router/index.js

@@ -12,6 +12,7 @@ const SharePage = () => import(/* webpackChunkName: "SharePage" */ '@/pages/Shar
 const NotesPage = () => import(/* webpackChunkName: "NotesPage" */ '@/pages/NotesPage')
 const QuickPage = () => import(/* webpackChunkName: "QuickPage" */ '@/pages/QuickPage')
 const AttachmentsPage = () => import(/* webpackChunkName: "AttachmentsPage" */ '@/pages/AttachmentsPage')
+const OverviewPage = () => import(/* webpackChunkName: "OverviewPage" */ '@/pages/OverviewPage')
 const NotFoundPage = () => import(/* webpackChunkName: "404Page" */ '@/pages/NotFoundPage')
 
 Vue.use(Router)
@@ -42,6 +43,12 @@ export default new Router({
       meta: {title: 'Open Note'},
       component: NotesPage,
     },
+    {
+      path: '/search/tags/:tag',
+      name: 'Search Notes',
+      meta: {title: 'Search Notes'},
+      component: NotesPage,
+    },
     {
       path: '/notes/open/:id/menu/:openMenu',
       name: 'Open Note Menu',
@@ -96,11 +103,24 @@ export default new Router({
       meta: {title:'Attachments by Type'},
       component: AttachmentsPage
     },
+    {
+      path: '/overview',
+      name: 'Overview of Notes',
+      meta: {title:'Overview of Notes'},
+      component: OverviewPage
+    },
     {
       path: '*',
       name: 'Page Not Found',
       meta: {title:'404 Page Not Found'},
       component: NotFoundPage
     },
+    // Cycle Tracking
+    {
+      path: '/metrictrack',
+      name: 'Metric Tracking',
+      meta: {title:'Metric Tracking'},
+      component: () => import(/* webpackChunkName: "MetrictrackingPage" */ '@/pages/MetrictrackingPage')
+    },
   ]
 })

client/src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

client/src/stores/mainStore.js

@@ -9,7 +9,9 @@ export default new Vuex.Store({
 		username: null,
 		nightMode: false,
 		isUserOnMobile: false,
-		userTotals: null,
+		fetchTotalsTimeout: null,
+		userTotals: null, // {} // setting this to object breaks reactivity
+		activeSessions: 0,
 	},
 	mutations: {
 		setUsername(state, username){
@@ -24,6 +26,7 @@ export default new Vuex.Store({
 			localStorage.removeItem('loginToken')
 			localStorage.removeItem('username')
 			localStorage.removeItem('currentVersion')
+			localStorage.removeItem('snippetCache')
 			delete axios.defaults.headers.common['authorizationtoken']
 			state.username = null
 			state.userTotals = null
@@ -41,23 +44,15 @@ export default new Vuex.Store({
 					'menu-text': '#5e6268',
 				},
 				'black':{
-					'body_bg_color': '#0f0f0f',//'#000',
+					'body_bg_color': 'linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(23,12,46,1) 100%)',
+					//'#0f0f0f',//'#000',
 					'small_element_bg_color': '#000',
 					'text_color': '#FFF',
 					'dark_border_color': '#555',//'#ACACAC', //Lighter color to accent elemnts user can interact with
-					'border_color': '#555',
+					'border_color': '#505050',
 					'menu-accent': '#626262',
 					'menu-text': '#d9d9d9',
 				},
-				'night':{
-					'body_bg_color': '#000',
-					'small_element_bg_color': '#000',
-					'text_color': '#a98457',
-					'dark_border_color': '#555',
-					'border_color': '#555',
-					'menu-accent': '#626262',
-					'menu-text': '#a69682',
-				},
 			}
 
 			//Catch values not in set
@@ -106,8 +101,23 @@ export default new Vuex.Store({
 			state.socket = socket
 		},
 		setUserTotals(state, totalsObject){
-			//Save all the totals for the user
-			state.userTotals = totalsObject
+
+			if(!state.userTotals){
+				state.userTotals = {}
+			}
+
+			// retain old values loaded on initial, extended options load
+			let oldMissingValues = {}
+			Object.keys(state.userTotals).forEach(key => {
+				if(!totalsObject[key] && totalsObject[key] !== 0){
+					oldMissingValues[key] = state.userTotals[key]
+				}
+			})
+
+			// combine old settings with updated settings
+			let oldAndNew = Object.assign(oldMissingValues, totalsObject)
+
+			state.userTotals = oldAndNew
 
 			//Set computer version from server
 			const currentVersion = localStorage.getItem('currentVersion')
@@ -127,6 +137,15 @@ export default new Vuex.Store({
 			// Object.keys(totalsObject).forEach( key => {
 			// 	console.log(key + ' -- ' + totalsObject[key])
 			// })
+		},
+		setActiveSessions(state, countData){
+			//Count of the number of active socket.io sessions for this user
+			state.activeSessions = countData
+		},
+		hideMetricTrackingReminder(state){
+			if(state.userTotals){
+				state.userTotals['showTrackMetricsButton'] = false
+			}
 		}
 	},
 	getters: {
@@ -152,19 +171,29 @@ export default new Vuex.Store({
 		totals: state => {
 			return state.userTotals
 		},
+		getActiveSessions: state => {
+			return state.activeSessions
+		}
 	},
 	actions: {
-		fetchAndUpdateUserTotals ({ commit }) {
-			axios.post('/api/user/totals')
-			.then( ({data}) => {
-				commit('setUserTotals', data)
-			})
-			.catch( error => {
-				if(error.response && error.response.status == 400){
-					commit('destroyLoginToken')
-					location.reload()
+		fetchAndUpdateUserTotals ({ commit, state }) {
+			clearTimeout(state.fetchTotalsTimeout)
+			state.fetchTotalsTimeout = setTimeout(() => {
+				// load extended options on initial load
+				let postData = {
+					extendedOptions: !state.userTotals
 				}
-			})
+				axios.post('/api/user/totals', postData)
+				.then( ({data}) => {
+					commit('setUserTotals', data)
+				})
+				.catch( error => {
+					if(error.response && error.response.status == 400){
+						commit('destroyLoginToken')
+						location.reload()
+					}
+				})
+			}, 100)
 		}
 	}
 })

configs/dev nginx sites available default.cfg

@@ -0,0 +1,97 @@
+#
+# Working dev server config
+#
+
+server {
+    listen 80;
+    listen [::]:80;
+    server_name 192.168.1.164;
+    return 301 https://$host$request_uri;
+}
+
+
+server {
+    
+    listen 443 ssl;
+
+    ssl_certificate /home/mab/ss/client/certs/nginx-selfsigned.crt;
+    ssl_certificate_key /home/mab/ss/client/certs/nginx-selfsigned.key;
+    ssl_dhparam /home/mab/ss/client/certs/dhparam.pem;
+
+    ssl_session_cache    shared:SSL:1m;
+    ssl_session_timeout  5m;
+    ssl_protocols        TLSV1.1 TLSV1.2 TLSV1.3;
+
+    ssl_ciphers  HIGH:!aNULL:!MD5;
+    ssl_prefer_server_ciphers  on;
+
+    access_log /var/log/nginx/httpslocalhost.access.log;
+    error_log  /var/log/nginx/httpslocalhost.error.log;
+
+    client_max_body_size 20M;
+
+    location / {
+            proxy_pass  https://127.0.0.1:8081;
+            proxy_set_header    Host                localhost;
+            proxy_set_header    X-Forwarded-Host    localhost;
+            proxy_set_header    X-Forwarded-Server  localhost;
+            proxy_set_header    X-Forwarded-Proto   $scheme;
+            proxy_set_header    X-Real-IP           $remote_addr;
+            proxy_set_header    X-Forwarded-For     $remote_addr;
+            proxy_redirect off;
+            proxy_connect_timeout 90s;
+            proxy_read_timeout 90s;
+            proxy_send_timeout 90s;
+            proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+    }
+
+    location /sockjs-node {
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $http_host;
+        proxy_set_header X-NginX-Proxy true;
+
+        proxy_pass https://127.0.0.1:8081;
+        proxy_redirect off;
+        proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+    }
+
+    location /api {
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header Host $http_host;
+            proxy_set_header X-NginX-Proxy true;
+
+            proxy_pass http://127.0.0.1:3000;
+            proxy_redirect off;
+            proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+    }
+
+    location /socket {
+        proxy_pass http://127.0.0.1:3001;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "Upgrade";
+        proxy_set_header Host $host;
+    }
+
+}
+
+
+
+# Prod settings to serve static index
+#    location / {
+#        autoindex on;
+#       #try_files $uri $uri/ /index.html;
+#    }
+
+#    location / {
+#       #autoindex on
+#
+#        proxy_pass http://127.0.0.1:8444;
+#        proxy_http_version 1.1;
+#        proxy_set_header Upgrade $http_upgrade;
+#        proxy_set_header Connection 'upgrade';
+#        proxy_set_header Host $host;
+#        proxy_cache_bypass $http_upgrade;
+#     }

dontSync.txt

@@ -11,4 +11,5 @@ common.js
 bundle.*
 client/dist*
 server/public/*
-client/dist*
+client/dist*
+*_scrape*

package.json

@@ -9,21 +9,21 @@
   "author": "Max",
   "license": "ISC",
   "dependencies": {
-    "body-parser": "^1.18.3",
+    "body-parser": "^1.19.0",
     "cheerio": "^1.0.0-rc.3",
     "dotenv": "^8.2.0",
-    "express": "^4.16.4",
+    "express": "^4.17.1",
     "express-rate-limit": "^5.1.3",
     "gm": "^1.23.1",
-    "helmet": "^3.23.1",
+    "helmet": "^4.1.1",
     "jsonwebtoken": "^8.5.1",
     "module-alias": "^2.2.2",
     "multer": "^1.4.2",
-    "mysql2": "^1.7.0",
-    "node-tesseract-ocr": "^1.0.0",
+    "mysql2": "^2.2.5",
+    "node-tesseract-ocr": "^2.0.0",
     "qrcode": "^1.4.4",
     "request": "^2.88.2",
-    "request-promise": "^4.2.5",
+    "request-promise": "^4.2.6",
     "socket.io": "^2.3.0",
     "speakeasy": "^2.0.0"
   },

server/helpers/Auth.js

@@ -6,6 +6,7 @@ const speakeasy = require('speakeasy')
 let Auth = {}
 
 const tokenSecretKey = process.env.JSON_KEY
+const sessionTokenUses = 300 //Defines number of uses each session token has before being refreshed
 
 //Creates session token 
 Auth.createToken = (userId, masterKey, pastId = null, pastCreatedDate = null) => {
@@ -26,7 +27,7 @@ Auth.createToken = (userId, masterKey, pastId = null, pastCreatedDate = null) =>
 
 			return db.promise().query(
 			'INSERT INTO user_active_session (salt, encrypted_master_password, created, uses, user_hash, session_id) VALUES (?,?,?,?,?,?)', 
-			[salt, encryptedMasterPass, created, 40, userHash, sessionId])
+			[salt, encryptedMasterPass, created, sessionTokenUses, userHash, sessionId])
 
 		})
 		.then((r,f) => {

server/helpers/SiteScrape.js

@@ -54,7 +54,7 @@ SiteScrape.getCleanUrls = (textBlock) => {
 SiteScrape.getHostName = (url) => {
 
 	var hostname = 'https://'+(new URL(url)).hostname;
-	console.log('hostname', hostname)
+	// console.log('hostname', hostname)
 	return hostname
 }
 
@@ -63,36 +63,95 @@ SiteScrape.getDisplayImage = ($, url) => {
 
 	const hostname = SiteScrape.getHostName(url)
 
-	let metaImg = $('meta[property="og:image"]')
-	let shortcutIcon = $('link[rel="shortcut icon"]')
-	let favicon = $('link[rel="icon"]')
+	let metaImg = $('[property="og:image"]')
+	let shortcutIcon = $('[rel="shortcut icon"]')
+	let favicon = $('[rel="icon"]')
 	let randomImg = $('img')
 
-	console.log('----')
+	//Set of images we may want gathered from various places in source
+	let imagesWeWant = []
+	let thumbnail = ''
 
 	//Scrape metadata for page image
-	//Grab the first random image we find
-	if(randomImg && randomImg[0] && randomImg[0].attribs){
-		thumbnail = hostname + randomImg[0].attribs.src
-		console.log('random img '+thumbnail)
+	if(randomImg && randomImg.length > 0){
+
+		let imgSrcs = []
+		for (let i = 0; i < randomImg.length; i++) {
+			imgSrcs.push( randomImg[i].attribs.src )
+		}
+
+		const half = Math.ceil(imgSrcs.length / 2)
+		imagesWeWant = [...imgSrcs.slice(-half), ...imgSrcs.slice(0,half) ]
+
 	}
-	//Grab the favicon of the site
+	//Grab the shortcut icon
 	if(favicon && favicon[0] && favicon[0].attribs){
-		thumbnail = hostname + favicon[0].attribs.href
-		console.log('favicon '+thumbnail)
+		imagesWeWant.push(favicon[0].attribs.href)
 	}
 	//Grab the shortcut icon
 	if(shortcutIcon && shortcutIcon[0] && shortcutIcon[0].attribs){
-		thumbnail = hostname + shortcutIcon[0].attribs.href
-		console.log('shortcut '+thumbnail)
+		imagesWeWant.push(shortcutIcon[0].attribs.href)
 	}
 	//Grab the presentation image for the site
 	if(metaImg && metaImg[0] && metaImg[0].attribs){
-		thumbnail = metaImg[0].attribs.content
-		console.log('ogImg '+thumbnail)
+		imagesWeWant.unshift(metaImg[0].attribs.content)
+	}
+
+	// console.log(imagesWeWant)
+
+	//Remove everything that isn't an accepted file format
+	for (let i = imagesWeWant.length - 1; i >= 0; i--) {
+
+		let img = String(imagesWeWant[i])
+
+		if(
+			!img.includes('.jpg') && 
+			!img.includes('.jpeg') && 
+			!img.includes('.png') && 
+			!img.includes('.gif')
+		){
+			imagesWeWant.splice(i,1)
+		}
+	}
+
+	//Find if we have absolute thumbnails or not
+	let foundAbsolute = false
+	for (let i = imagesWeWant.length - 1; i >= 0; i--) {
+
+		let img = imagesWeWant[i]
+
+		//Add host name if its not included
+		if(String(img).includes('//') || String(img).includes('http')){
+			foundAbsolute = true
+			break
+		}
+	}
+
+	//Go through all found images. Grab the one closest to the top. Closer is better
+	for (let i = imagesWeWant.length - 1; i >= 0; i--) {
+		
+		let img = imagesWeWant[i]
+
+		if(!String(img).includes('//') && foundAbsolute){
+			continue;
+		}
+
+		//Only add host to images if no absolute images were found
+		if(!String(img).includes('//') ){
+			if(img.indexOf('/') != 0){
+				img = '/' + img
+			}
+			img = hostname + img
+		}
+
+		if(img.indexOf('//') == 0){
+			img = 'https:' + img //Scrape breaks without protocol 
+		}
+			
+		thumbnail = img
+		
 	}
 
-	console.log('-----')
 	return thumbnail
 }
 

server/index.js

@@ -1,7 +1,12 @@
-//Set up environmental variables, pulled from .env file used as process.env.DB_HOST
+//Set up environmental variables, pulled from ~/.env file used as process.env.DB_HOST
 const os = require('os') //Used to get path of home directory
 const result = require('dotenv').config({ path:(os.homedir()+'/.env') })
 
+const ports = {
+	express: 3000,
+	socketIo: 3001
+}
+
 //Allow user of @ in in require calls. Config in package.json
 require('module-alias/register')
 
@@ -15,7 +20,6 @@ const helmet = require('helmet')
 const express = require('express')
 const app = express()
 app.use( helmet() )
-const port = 3000
 
 
 //
@@ -51,12 +55,31 @@ io.on('connection', function(socket){
 		Auth.decodeToken(token)
 		.then(userData => {
 			socket.join(userData.userId)
+
+			//Track active logged in user accounts
+			const usersInRoom = io.sockets.adapter.rooms[userData.userId]
+			io.to(userData.userId).emit('update_active_user_count', usersInRoom.length)
+
 		}).catch(error => {
 			//Don't add user to room if they are not logged in
 			// console.log(error)
 		})
 	})
 
+	socket.on('get_active_user_count', token => {
+		Auth.decodeToken(token)
+		.then(userData => {
+			socket.join(userData.userId)
+
+			//Track active logged in user accounts
+			const usersInRoom = io.sockets.adapter.rooms[userData.userId]
+			io.to(userData.userId).emit('update_active_user_count', usersInRoom.length)
+
+		}).catch(error => {
+			// console.log(error)
+		})
+	})
+
 	//Renew Session tokens when users request a new one
 	socket.on('renew_session_token', token => {
 
@@ -205,14 +228,14 @@ io.on('connection', function(socket){
 		}
 	})
 
-	socket.on('disconnect', function(){
+	socket.on('disconnect', function(socket){
 		// console.log('user disconnected');
 	});
 });
 
 
-http.listen(3001, function(){
-	// console.log('socket.io liseting on port 3001');
+http.listen(ports.socketIo, function(){
+	console.log(`Socke.io: Listening on port ${ports.socketIo}!`)
 });
 
 //Enable json body parsing in requests. Allows me to post data in ajax calls
@@ -257,7 +280,6 @@ const printResults = true
 let UserTest = require('@models/User')
 let NoteTest = require('@models/Note')
 let AuthTest = require('@helpers/Auth')
-
 Auth.test()
 UserTest.keyPairTest('genMan30', '1', printResults)
 .then( ({testUserId, masterKey}) => NoteTest.test(testUserId, masterKey, printResults))
@@ -266,9 +288,8 @@ UserTest.keyPairTest('genMan30', '1', printResults)
 	Auth.testTwoFactor()
 })
 
-
 //Test 
-app.get('/api', (req, res) => res.send('Solidscribe API is up and running'))
+app.get('/api', (req, res) => res.send('Solidscribe /API is up and running'))
 
 //Serve up uploaded files
 app.use('/api/static', express.static( __dirname+'/../staticFiles' ))
@@ -297,9 +318,13 @@ app.use('/api/attachment', attachment)
 var quickNote = require('@routes/quicknoteController')
 app.use('/api/quick-note', quickNote)
 
+//cycle tracking endpoint
+var metricTracking = require('@routes/metrictrackingController')
+app.use('/api/metric-tracking', metricTracking)
+
 //Output running status
-app.listen(port, () => { 
-	// console.log(`Listening on port ${port}!`)
+app.listen(ports.express, () => { 
+	console.log(`Express: Listening on port ${ports.express}!`)
 })
 
 //

server/models/Attachment.js

@@ -46,31 +46,53 @@ Attachment.textSearch = (userId, searchTerm) => {
 	})
 }
 
-Attachment.search = (userId, noteId, attachmentType, offset, setSize) => {
+Attachment.search = (userId, noteId, attachmentType, offset, setSize, includeShared) => {
 	return new Promise((resolve, reject) => {
 
 		let params = [userId]
-		let query = 'SELECT * FROM attachment WHERE user_id = ? AND visible = 1 '
+		let query = `
+			SELECT attachment.*, note.share_user_id FROM attachment 
+			JOIN note ON (attachment.note_id = note.id)
+			WHERE attachment.user_id = ? AND visible = 1 `
 
 		if(noteId && noteId > 0){
-			query += 'AND note_id = ? '
+			//
+			// Show everything if note ID is present
+			//
+			query += 'AND attachment.note_id = ? '
 			params.push(noteId)
-		}
 
-		if(attachmentType == 'links'){
-			query += 'AND attachment_type = 1 '
+		} else {
+			//
+			// Other filters if NO note id
+			//
+
+			if(attachmentType == 'links'){
+				query += 'AND attachment_type = 1 '
+			}
+			if(attachmentType == 'files'){
+				query += 'AND attachment_type > 1 '
+			}
+
+			query += `AND note.archived = ${ attachmentType == 'archived' ? '1':'0' } `
+			query += `AND note.trashed = ${ attachmentType == 'trashed' ? '1':'0' } `
 		}
-		if(attachmentType == 'files'){
-			query += 'AND attachment_type > 1 '
+		
+
+		if(!noteId){
+			const sharedOrNot = includeShared ? ' NOT ':' ' 
+			query += `AND note.share_user_id IS${sharedOrNot}NULL `
 		}
 
 
 		query += 'ORDER BY last_indexed DESC '
 
 		const limitOffset = parseInt(offset, 10) || 0 //Either parse int, or use zero
-		const parsedSetSize = parseInt(setSize, 10) || 20 //Either parse int, or use zero
+		const parsedSetSize = parseInt(setSize, 10) || 20
 		query += ` LIMIT ${limitOffset}, ${parsedSetSize}`
 
+		console.log(query)
+
 		db.promise()
 			.query(query, params)
 			.then((rows, fields) => {
@@ -325,14 +347,14 @@ Attachment.downloadFileFromUrl = (url) => {
 
 	return new Promise((resolve, reject) => {
 
-			if(url == null){
+			if(url == null || url == undefined || url == ''){
 				resolve(null)
 			}
 
 			const random = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
-			const extension = '.'+url.split('.').pop() //This is throwing an error
-			let fileName = random+'_scrape'+extension
-			const thumbPath = 'thumb_'+fileName
+			let extension = ''
+			let fileName = random+'_scrape'
+			let thumbPath = 'thumb_'+fileName
 
 			console.log('Scraping image url')
 			console.log(url)
@@ -347,6 +369,8 @@ Attachment.downloadFileFromUrl = (url) => {
 				.on('response', res => {
 					console.log(res.statusCode)
 					console.log(res.headers['content-type'])
+					//Get mime type from header content type
+					// extension = '.'+String(res.headers['content-type']).split('/').pop()
 				})
 				.pipe(fs.createWriteStream(filePath+thumbPath))
 				.on('close', () => {
@@ -354,14 +378,17 @@ Attachment.downloadFileFromUrl = (url) => {
 					//resize image if its real big
 					gm(filePath+thumbPath)
 					.resize(550) //Resize to width of 550 px 
-					.quality(75) //compression level 0 - 100 (best)
+					.quality(85) //compression level 0 - 100 (best)
 					.write(filePath+thumbPath, function (err) {
-						if(err){ console.log(err) }
+						if(err){ 
+							console.log(err) 
+							return resolve(null)
+						}
+
+						console.log('Saved Image')
+						return resolve(fileName)
 					})
 
-
-					console.log('Saved Image')
-					resolve(fileName)
 				})
 	})
 }
@@ -396,7 +423,7 @@ Attachment.processUrl = (userId, noteId, url) => {
 		.query(`INSERT INTO attachment 
 			(note_id, user_id, attachment_type, text, url, last_indexed, file_location) 
 			VALUES (?, ?, ?, ?, ?, ?, ?)`, 
-			[noteId, userId, 1, 'Processing...', url, created, null])
+			[noteId, userId, 1, url, url, created, null])
 		.then((rows, fields) => {
 			//Set two bigger variables then return request for processing
 			request = rp(options)
@@ -421,8 +448,10 @@ Attachment.processUrl = (userId, noteId, url) => {
 			const keywords = SiteScrape.getKeywords($)
 
 			var desiredSearchText = ''
-			desiredSearchText += pageTitle + "\n"
-			desiredSearchText += keywords
+			desiredSearchText += pageTitle
+			if(keywords){
+				desiredSearchText += "\n" + keywords
+			}
 
 			console.log({
 				pageTitle,

server/models/MetricTracking.js

@@ -0,0 +1,71 @@
+let db = require('@config/database')
+
+let Note = require('@models/Note')
+
+let MetricTracking = module.exports = {};
+
+
+MetricTracking.get = (userId, masterKey) => {
+	return new Promise((resolve, reject) => {
+
+		db.promise()
+		.query(`
+			SELECT note.id FROM note WHERE quick_note = 2 AND user_id = ? LIMIT 1`, [userId])
+		.then((rows, fields) => {
+
+			//Quick Note is set, return note object
+			if(rows[0][0] != undefined){
+
+				let noteId = rows[0][0].id
+				const note = Note.get(userId, noteId, masterKey)
+				.then(noteData => {
+					return resolve(noteData)
+				})
+
+			} else {
+				return resolve('no data')
+			}
+			
+		})
+		.catch(console.log)
+	})
+}
+
+MetricTracking.create = (userId, masterKey) => {
+	return new Promise((resolve, reject) => {
+		let finalId = null
+		return Note.create(userId, 'Metric Tracking', '', masterKey)
+		.then(insertedId => {
+			finalId = insertedId
+			db.promise().query('UPDATE note SET quick_note = 2 WHERE id = ? AND user_id = ?',[insertedId, userId])
+			.then((rows, fields) => {
+
+				const note = Note.get(userId, finalId, masterKey)
+				.then(noteData => {
+					return resolve(noteData)
+				})
+
+			})
+		})
+		.catch(console.log)
+	})
+}
+
+
+MetricTracking.save = (userId, metricData, masterKey) => {
+	return new Promise((resolve, reject) => {
+
+		let finalId = null
+
+		MetricTracking.get(userId, masterKey)
+		.then(noteObject => {
+
+			return Note.update(userId, noteObject.id, metricData, noteObject.title, noteObject.color, noteObject.pinned, noteObject.archived, null, masterKey)
+			
+		})
+		.then( saveResults => {
+			return resolve(saveResults)
+		})
+	})
+
+}

server/models/Note.js

@@ -442,6 +442,10 @@ Note.update = (userId, noteId, noteText, noteTitle, color, pinned, archived, has
 		})
 		.then((rows, fields) => {
 
+			if(!rows[0] || !rows[0][0] || !rows[0][0]['note_raw_text_id']){
+				return reject(false)
+			}
+
 			const textId = rows[0][0]['note_raw_text_id']
 			let salt = rows[0][0]['salt']
 			let snippetSalt = rows[0][0]['snippet_salt']
@@ -658,60 +662,9 @@ Note.delete = (userId, noteId, masterKey = null) => {
 	})
 }
 
-//text is the current text for the note that will be compared to the text in the database
-Note.getDiffText = (userId, noteId, usersCurrentText, lastUpdated) => {
-	return new Promise((resolve, reject) => {
-		Note.get(userId, noteId)
-		.then(noteObject => {
-
-			if(!noteObject.text || !usersCurrentText || noteObject.encrypted == 1){
-				return resolve(null)
-			}
-
-			let oldText = noteObject.text.replace(/(\r\n|\n|\r)/gm,"")
-			let newText = usersCurrentText.replace(/(\r\n|\n|\r)/gm,"")
-
-			if(noteObject.updated == lastUpdated){
-				// console.log('No note diff')
-				return resolve(null)
-			}
-
-			if(noteObject.updated > lastUpdated){
-				newText = noteObject.text.replace(/(\r\n|\n|\r)/gm,"")
-				oldText = usersCurrentText.replace(/(\r\n|\n|\r)/gm,"")
-			}
-
-			const dmp = new DiffMatchPatch.diff_match_patch()
-			const diff = dmp.diff_main(oldText, newText)
-
-			dmp.diff_cleanupSemantic(diff)
-			const patch_list = dmp.patch_make(oldText, newText, diff);
-  			const patch_text = dmp.patch_toText(patch_list);
-  			
-  			//Patch text -  shows a list of changes
-  			var patches = dmp.patch_fromText(patch_text);
-  			// console.log(patch_text)
-
-  			//results[1] - contains diagnostic data for patch apply, its possible it can fail
-  			var results = dmp.patch_apply(patches, oldText);
-  			
-  			//Compile return data for front end
-  			const returnData = {
-  				updatedText: results[0],
-  				diffs: results[1].length, //Only use length for now
-  				updated: Math.max(noteObject.updated,lastUpdated) //Return most recently updated date
-
-  			}
-  			
-  			//Final change in notes
-  			// console.log(returnData)
-
-			resolve(returnData)
-		})
-	})
-
-}
-
+//
+// Returns noteData
+// 
 Note.get = (userId, noteId, masterKey) => {
 	return new Promise((resolve, reject) => {
 
@@ -735,6 +688,7 @@ Note.get = (userId, noteId, masterKey) => {
 					note_raw_text.text, 
 					note_raw_text.salt, 
 					note_raw_text.updated as updated,
+					GROUP_CONCAT(DISTINCT(tag.text) ORDER BY tag.text DESC) AS tags,
 					note.id,
 					note.user_id,
 					note.created,
@@ -751,7 +705,9 @@ Note.get = (userId, noteId, masterKey) => {
 				JOIN note_raw_text ON (note_raw_text.id = note.note_raw_text_id)
 				LEFT JOIN attachment ON (note.id = attachment.note_id)
 				LEFT JOIN user as shareUser ON (note.share_user_id = shareUser.id)
-				WHERE note.user_id = ? AND note.id = ? LIMIT 1`, [userId, noteId])
+				LEFT JOIN note_tag ON (note.id = note_tag.note_id AND note_tag.user_id = ?)
+				LEFT JOIN tag ON (note_tag.tag_id = tag.id)
+				WHERE note.user_id = ? AND note.id = ? LIMIT 1`, [userId, userId, noteId])
 
 		})
 		.then((rows, fields) => {
@@ -1038,7 +994,8 @@ Note.search = (userId, searchQuery, searchTags, fastFilters, masterKey) => {
 				LEFT JOIN tag ON (tag.id = note_tag.tag_id)
 				LEFT JOIN attachment ON (note.id = attachment.note_id AND attachment.visible = 1)
 				LEFT JOIN user as shareUser ON (note.share_user_id = shareUser.id)
-				WHERE note.user_id = ?
+				WHERE note.user_id = ? 
+					AND note.quick_note <= 1
 				`
 
 			//If text search returned results, limit search to those ids			

server/models/QuickNote.js

@@ -13,11 +13,14 @@ QuickNote.get = (userId, masterKey) => {
 			SELECT note.id FROM note WHERE quick_note = 1 AND user_id = ? LIMIT 1`, [userId])
 		.then((rows, fields) => {
 
-			//Quick Note is set, return note text
+			//Quick Note is set, return note object
 			if(rows[0][0] != undefined){
 
 				let noteId = rows[0][0].id
-				return resolve({'noteId':noteId})
+				const note = Note.get(userId, noteId, masterKey)
+				.then(noteData => {
+					return resolve(noteData)
+				})
 
 			} else {
 				//Or create a new note and get the id
@@ -81,7 +84,7 @@ QuickNote.update = (userId, pushText, masterKey) => {
 				.replace(/&[#A-Za-z0-9]+;/g,'') //Rip out all HTML entities
 				.replace(/<[^>]+>/g, '') //Rip out all HTML tags
 
-			//Turn links into actual linx
+			//Turn links into actual link
 			clean = QuickNote.makeUrlLink(clean)
 
 			if(clean == ''){ clean = '&nbsp;' }
@@ -114,7 +117,7 @@ QuickNote.update = (userId, pushText, masterKey) => {
 			}
 		})
 		.then( saveResults => {
-			return resolve(true)
+			return resolve(saveResults)
 		})
 	})
 

server/models/Tag.js

@@ -138,6 +138,33 @@ Tag.get = (userId, noteId) => {
 	})
 }
 
+//
+// Get just tag string for note
+//
+Tag.fornote = (userId, noteId) => {
+	return new Promise((resolve, reject) => {
+
+		
+			db.promise()
+			.query(`SELECT GROUP_CONCAT(DISTINCT(tag.text) ORDER BY tag.text DESC) AS tags 
+					FROM note_tag
+					LEFT JOIN tag ON (note_tag.tag_id = tag.id)
+					WHERE note_tag.note_id = ?
+					AND user_id = ?;
+					`, [noteId,userId])
+			.then((rows, fields) => {
+
+				//pull IDs out of returned results
+				// let ids = rows[0].map( item => {})
+
+				resolve( rows[0][0] ) //Return all tags found by query
+			})
+			.catch(console.log)
+		
+		
+	})
+}
+
 //
 // Get all tags for a note and concatinate into a string 'all, tags, like, this'
 //

server/models/User.js

@@ -9,7 +9,7 @@ const speakeasy = require('speakeasy')
 
 let User = module.exports = {}
 
-const version = '3.1.6'
+const version = '3.6.3'
 
 //Login a user, if that user does not exist create them
 //Issues login token
@@ -35,7 +35,7 @@ User.login = (username, password, authToken = null) => {
 			//
 			if(rows[0].length == 1){
 
-				//Pull out user data from database results
+				//Pull out user data from database results 
 				const lookedUpUser = rows[0][0]
 
 				//Verify Token if set
@@ -193,17 +193,19 @@ User.register = (username, password) => {
 }
 
 //Counts notes, pinned notes, archived notes, shared notes, unread notes, total files and types
-User.getCounts = (userId) => {
+User.getCounts = (userId, extendedOptions) => {
 	return new Promise((resolve, reject) => {
 
-		let countTotals = {}
-		const userHash = cs.hash(String(userId)).toString('base64')
+		let countTotals = {
+			tags: {}
+		}
+		// const userHash = cs.hash(String(userId)).toString('base64')
 
 		db.promise().query(
 			`SELECT
 				SUM(archived = 1 && share_user_id IS NULL && trashed = 0) AS archivedNotes,
 				SUM(trashed = 1) AS trashedNotes,
-				SUM(share_user_id IS NULL && trashed = 0) AS totalNotes,
+				SUM(share_user_id IS NULL && trashed = 0 AND quick_note < 2) AS totalNotes,
 				SUM(share_user_id IS NOT null && opened IS null && trashed = 0) AS youGotMailCount,
 				SUM(share_user_id != ? && trashed = 0) AS sharedToNotes
 			FROM note 
@@ -244,15 +246,71 @@ User.getCounts = (userId) => {
 
 			Object.assign(countTotals, rows[0][0]) //combine results
 
+			//Count usages of user tags, sort by most popular
+			return db.promise().query(`
+				SELECT 
+					tag.text, COUNT(tag_id) AS uses, tag.id
+				FROM note_tag
+					JOIN tag ON (tag.id = note_tag.tag_id)
+				WHERE user_id = ?
+				GROUP BY tag_id
+				ORDER BY uses DESC
+				LIMIT 16
+			`, [userId])
+
+		}).then( (rows, fields) => {
+
+			
+
 			//Convert everything to an int or 0
 			Object.keys(countTotals).forEach( key => {
 				const count = parseInt(countTotals[key])
 				countTotals[key] = count ? count : 0
 			})
 
+			//Build out tags object
+			let tagsObject = {}
+			rows[0].forEach(tagRow => {
+				tagsObject[tagRow['text']] = {'id':tagRow.id, 'uses':tagRow.uses}
+			})
+
+			//Assign after counts are updated
+			countTotals['tags'] = tagsObject
+
 			countTotals['currentVersion'] = version
 
-			resolve(countTotals)
+			// Allow for extended options set on page load
+			if(extendedOptions){
+
+				db.promise().query(
+					`SELECT updated FROM note
+						JOIN note_raw_text ON note_raw_text.id = note.note_raw_text_id 
+						WHERE note.quick_note = 2
+						AND user_id = ?`, [userId])
+				.then( (rows, fields) => {
+
+					
+
+					if(rows[0][0] && rows[0][0].updated){
+						const lastOpened = rows[0][0].updated
+						const timeDiff = Math.round(((+new Date) - (lastOpened))/1000)
+						const hoursInSeconds = (12 * 60 * 60) //12 hours
+
+						// Show metric tracking button if its been 12 hours since last entry
+						if(lastOpened && timeDiff > hoursInSeconds){
+							countTotals['showTrackMetricsButton'] = true
+						}
+					}
+					
+
+					resolve(countTotals)
+				})
+
+
+			} else {
+				resolve(countTotals)
+			}
+
 		})
 
 	})

server/routes/attachmentController.js

@@ -26,7 +26,7 @@ router.use(function setUserId (req, res, next) {
 })
 
 router.post('/search', function (req, res) {
-	Attachment.search(userId, req.body.noteId, req.body.attachmentType, req.body.offset, req.body.setSize)
+	Attachment.search(userId, req.body.noteId, req.body.attachmentType, req.body.offset, req.body.setSize, req.body.includeShared)
 	.then( data => res.send(data) )
 })
 

server/routes/metrictrackingController.js

@@ -0,0 +1,45 @@
+//
+// /api/metric-tracking
+//
+
+var express = require('express')
+var router = express.Router()
+
+let MetricTracking = require('@models/MetricTracking');
+
+let userId = null
+let masterKey = null
+
+// middleware that is specific to this router
+router.use(function setUserId (req, res, next) {
+
+	//Session key is required to continue
+	if(!req.headers.sessionId){
+		next('Unauthorized')
+	}
+
+	if(req.headers.userId){
+		userId = req.headers.userId
+		masterKey = req.headers.masterKey
+		next()
+	}
+})
+
+router.post('/get', function (req, res) {
+	MetricTracking.get(userId, masterKey)
+	.then( data => res.send(data) )
+})
+
+router.post('/create', function (req, res) {
+	MetricTracking.create(userId, masterKey)
+	.then( data => res.send(data) )
+})
+
+//Push text to quick note
+router.post('/save', function (req, res) {
+	MetricTracking.save(userId, req.body.cycleData, masterKey)
+	.then( data => res.send(data) )
+})
+
+
+module.exports = router

server/routes/noteController.js

@@ -60,14 +60,6 @@ router.post('/search', function (req, res) {
 	})
 })
 
-router.post('/difftext', function (req, res) {
-	Note.getDiffText(userId, req.body.noteId, req.body.text, req.body.updated)
-	.then( fullDiffText => {
-		//Response should be full diff text
-		res.send(fullDiffText)
-	})
-})
-
 router.post('/reindex', function (req, res) {
 	Note.reindex(userId, masterKey)
 	.then( data => {

server/routes/tagController.js

@@ -50,6 +50,12 @@ router.post('/get', function (req, res) {
 	.then( data => res.send(data) )
 })
 
+//Get the latest notes the user has created
+router.post('/fornote', function (req, res) {
+	Tags.fornote(userId, req.body.noteId)
+	.then( data => res.send(data) )
+})
+
 //Get all the tags for this user in order of usage
 router.post('/usertags', function (req, res) {
 	Tags.userTags(userId, req.body.searchQuery, req.body.searchTags, req.body.fastFilters)

server/routes/userController.js

@@ -53,7 +53,7 @@ router.post('/revokesessions', function(req, res) {
 
 // fetch counts of users notes
 router.post('/totals', function (req, res) {
-	User.getCounts(req.headers.userId)
+	User.getCounts(req.headers.userId, req.body.extendedOptions)
 	.then( countsObject => res.send( countsObject ))
 })
 

startDevServerAndClient.sh

@@ -1,10 +1,11 @@
 #!/bin/bash
 
-echo 'Make sure this is being run from root folder of project'
+cd /home/mab/ss
 
-echo 'Starting Client webpack dev server (/app), in a screen, watching for file changes...'
-screen -dm bash -c "cd client/; npm run watch"
+echo '::--:: Starting dev server. cd client; npm run serve -> 192.168.1.164:8081'
+screen -dmS "NoteClientScreen" bash -c "cd /home/mab/ss/client; npm run serve -- --port 8081 --https true"
 
-echo 'Starting API server (/api), watching for file changes...'
-cd server
+echo '::--:: Starting API server (/api), watching for file changes...'
+cd /home/mab/ss/server
+pm2 flush
 pm2 start ecosystem.config.js

staticFiles/.gitignore

@@ -1,4 +0,0 @@
-*
-*/
-!.gitignore
-!assets

staticFiles/assets/logo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 132.29166 132.29167" height="500" width="500">
+  <defs id="defs2"/>
+  <metadata id="metadata5">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g style="display:inline" transform="translate(0,-164.70832)" id="layer1">
+    <path id="path3813-4" d="m 56.22733,165.36641 -55.56249926,15.875 8e-7,63.5 47.62499846,11.90625 v 27.78125 l -47.76066333,-13.9757 0.13566407,10.00695 55.56249926,15.875 v -47.625 l -47.6249985,-11.90625 -8e-7,-47.625 47.7606633,-13.94121 c 0.135664,-2.30629 -0.135664,-9.87129 -0.135664,-9.87129 z" style="fill:#0f7425;fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;shape-rendering:crispedges"/>
+    <path id="path4563" d="m 20.508581,220.92891 c 15.265814,-14.23899 27.809717,-7.68002 39.687499,3.96875 v -7.9375 C 51.75093,200.8366 37.512584,206.01499 20.508581,205.05391 Z" style="fill:#04cb03;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;shape-rendering:crispedges"/>
+    <path id="path4563-6" d="m 111.78985,220.92891 c -15.265834,-14.23899 -27.809737,-7.68002 -39.68752,3.96875 v -7.9375 c 8.445151,-16.12356 22.683497,-10.94517 39.68752,-11.90625 z" style="display:inline;fill:#04cb03;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;shape-rendering:crispedges"/>
+    <path id="path3813-4-2" d="m 76.07108,165.36641 55.5625,15.875 v 63.5 l -47.625,11.90625 v 27.78125 l 47.76067,-13.9757 -0.13567,10.00695 -55.5625,15.875 v -47.625 l 47.625,-11.90626 V 189.17891 L 75.93542,175.2377 c -0.13567,-2.30629 0.13566,-9.87129 0.13566,-9.87129 z" style="display:inline;fill:#04cb03;fill-opacity:1;stroke:none;stroke-width:0.52916676;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;shape-rendering:crispedges"/>
+  </g>
+</svg>

staticFiles/assets/manifest.json

@@ -0,0 +1,24 @@
+{
+	"theme_color":"#000",
+	"background_color": "#000",
+	"description": "Take Notes",
+	"display": "standalone",
+	"icons": [
+		{
+			"src": "/api/static/assets/logo.png",
+			"sizes": "496x496",
+			"type": "image/png",
+			"purpose": "any" 
+		},
+		{
+			"src": "/api/static/assets/maskable_icon.png",
+			"sizes": "826x826",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	],
+	"name": "Solid Scribe",
+	"short_name": "Solid Scribe",
+	"start_url": "/#/notes",
+	"author":"Max"
+}

staticFiles/assets/manifest.webmanifest

@@ -0,0 +1,15 @@
+{
+	"background_color": "purple",
+	"description": "Take Notes",
+	"display": "fullscreen",
+	"icons": [
+		{
+			"src": "/api/static/assets/favicon.ico",
+			"sizes": "192x192",
+			"type": "image/png"
+		}
+	],
+	"name": "Notes",
+	"short_name": "Notes",
+	"start_url": "/#/notes"
+}

staticFiles/assets/marketing/logo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 132.29166 132.29167" height="500" width="500">
+  <defs id="defs2"/>
+  <metadata id="metadata5">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g style="display:inline" transform="translate(0,-164.70832)" id="layer1">
+    <path id="path3813-4" d="m 56.22733,165.36641 -55.56249926,15.875 8e-7,63.5 47.62499846,11.90625 v 27.78125 l -47.76066333,-13.9757 0.13566407,10.00695 55.56249926,15.875 v -47.625 l -47.6249985,-11.90625 -8e-7,-47.625 47.7606633,-13.94121 c 0.135664,-2.30629 -0.135664,-9.87129 -0.135664,-9.87129 z" style="fill:#0f7425;fill-opacity:1;stroke:none;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
+    <path id="path4563" d="m 20.508581,220.92891 c 15.265814,-14.23899 27.809717,-7.68002 39.687499,3.96875 v -7.9375 C 51.75093,200.8366 37.512584,206.01499 20.508581,205.05391 Z" style="fill:#04cb03;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
+    <path id="path4563-6" d="m 111.78985,220.92891 c -15.265834,-14.23899 -27.809737,-7.68002 -39.68752,3.96875 v -7.9375 c 8.445151,-16.12356 22.683497,-10.94517 39.68752,-11.90625 z" style="display:inline;fill:#04cb03;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
+    <path id="path3813-4-2" d="m 76.07108,165.36641 55.5625,15.875 v 63.5 l -47.625,11.90625 v 27.78125 l 47.76067,-13.9757 -0.13567,10.00695 -55.5625,15.875 v -47.625 l 47.625,-11.90626 V 189.17891 L 75.93542,175.2377 c -0.13567,-2.30629 0.13566,-9.87129 0.13566,-9.87129 z" style="display:inline;fill:#04cb03;fill-opacity:1;stroke:none;stroke-width:0.52916676;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
+  </g>
+</svg>

staticFiles/assets/marketing/manifest.json

@@ -0,0 +1,24 @@
+{
+	"theme_color":"#000",
+	"background_color": "#000",
+	"description": "Take Notes",
+	"display": "standalone",
+	"icons": [
+		{
+			"src": "/api/static/assets/logo.png",
+			"sizes": "496x496",
+			"type": "image/png",
+			"purpose": "any" 
+		},
+		{
+			"src": "/api/static/assets/maskable_icon.png",
+			"sizes": "826x826",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	],
+	"name": "Solid Scribe",
+	"short_name": "Solid Scribe",
+	"start_url": "/#/notes",
+	"author":"Max"
+}

syncDown.sh

@@ -12,4 +12,4 @@
 # z - Compress for speed
 # h - Human Readable file sizes
 
-rsync -e 'ssh' --exclude-from=dontSync.txt -havzC --update mab@marvin.local:/home/mab/pi/ .
+rsync -e 'ssh' --exclude-from=dontSync.txt -havzC --update mab@marvin.local:/home/mab/ss/ .

updatedomain.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Setup env variables
+source ~/.env
+
+# Send updated dynamic IP address to Namecheap, in order to update subdomains.
+# This uses curl (separate pkg) to send the change; Namecheap automatically detects source IP if the ip field (like domain, password) ..
+# is not specified.
+
+# info helper
+info() { printf "\n%s %s\n\n" "$( date )" "$*" >&2; }
+
+info "Starting IP update for subdomains"
+
+echo "https://dynamicdns.park-your-domain.com/update?host=$DYDNS_HOST&domain=$DYDNS_DOMAIN&password=$DYDNS_PASS"
+
+# first subdomain
+curl "https://dynamicdns.park-your-domain.com/update?host=$DYDNS_HOST&domain=$DYDNS_DOMAIN&password=$DYDNS_PASS"
+# second subdomain
+curl "https://dynamicdns.park-your-domain.com/update?host=$DYDNS_HOST2&domain=$DYDNS_DOMAIN&password=$DYDNS_PASS"
+
+info "IP update done"