Correct for desaturation in hue-rotate step.

.circleci/config.yml

@@ -2,23 +2,17 @@
 #
 # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 #
-version: 2.1
-
-orbs:
-  node: circleci/node@5.1.0
-
+version: 2
 jobs:
   build:
     docker:
-      - image: cimg/node:20.17.0
-      - image: mongo:4.4
+      - image: circleci/node:16.10.0
+      - image: circleci/mongo:4.4
 
-    working_directory: ~/homebrewery
-    executor: node/default
+    working_directory: ~/repo
 
     steps:
-      - checkout:
-          path: ~/homebrewery
+      - checkout
 
       # Download and cache dependencies
       - restore_cache:
@@ -27,63 +21,12 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - run: sudo npm install -g npm@10.8.2
-      - node/install-packages:
-          app-dir: ~/homebrewery
-          cache-path: node_modules
-          override-ci-command: npm i
+      - run: npm install
 
       - save_cache:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
 
-      - persist_to_workspace:
-          root: .
-          paths:
-            - .
-
-  test:
-    docker:
-      - image: cimg/node:20.17.0
-
-    working_directory: ~/homebrewery
-    parallelism: 1
-
-    steps:
-      - attach_workspace:
-          at: .
-
       # run tests!
-      - run:
-          name: Test - API Unit Tests
-          command: npm run test:api-unit
-      - run:
-          name: Test - Basic
-          command: npm run test:basic
-      - run:
-          name: Test - Mustache Spans
-          command: npm run test:mustache-syntax
-      - run:
-          name: Test - Definition Lists
-          command: npm run test:definition-lists
-      - run:
-          name: Test - Hard Breaks
-          command: npm run test:hard-breaks
-      - run:
-          name: Test - Variables
-          command: npm run test:variables
-      - run:
-          name: Test - Routes
-          command: npm run test:route
-      - run:
-          name: Test - Coverage
-          command: npm run test:coverage
-
-workflows:
-  build_and_test:
-    jobs:
-      - build
-      - test:
-          requires:
-            - build
+      - run: npm run circleci

.eslintrc.js

@@ -0,0 +1,78 @@
+module.exports = {
+	root          : true,
+	parserOptions : {
+		ecmaVersion  : 2021,
+		sourceType   : 'module',
+		ecmaFeatures : {
+			jsx : true
+		}
+	},
+	env : {
+		browser : true,
+		node    : true
+	},
+	plugins : ['react'],
+	rules   : {
+		/** Errors **/
+		'camelcase'              : ['error', { properties: 'never' }],
+		'func-style'             : ['error', 'expression', { allowArrowFunctions: true }],
+		'no-array-constructor'   : 'error',
+		'no-iterator'            : 'error',
+		'no-nested-ternary'      : 'error',
+		'no-new-object'          : 'error',
+		'no-proto'               : 'error',
+		'react/jsx-no-bind'      : ['error', { allowArrowFunctions: true }],
+		'react/jsx-uses-react'   : 'error',
+		'react/prefer-es6-class' : ['error', 'never'],
+
+		/** Warnings **/
+		'max-lines' : ['warn', {
+			max            : 200,
+			skipComments   : true,
+			skipBlankLines : true,
+		}],
+		'max-depth'            : ['warn', { max: 4 }],
+		'max-params'           : ['warn', { max: 5 }],
+		'no-restricted-syntax' : ['warn', 'ClassDeclaration', 'SwitchStatement'],
+		'no-unused-vars'       : ['warn', {
+			vars              : 'all',
+			args              : 'none',
+			varsIgnorePattern : 'config|_|cx|createClass'
+		}],
+		'react/jsx-uses-vars' : 'warn',
+
+		/** Fixable **/
+		'arrow-parens'    : ['warn', 'always'],
+		'brace-style'     : ['warn', '1tbs', { allowSingleLine: true }],
+		'jsx-quotes'      : ['warn', 'prefer-single'],
+		'no-var'          : 'warn',
+		'prefer-const'    : 'warn',
+		'prefer-template' : 'warn',
+		'quotes'          : ['warn', 'single', { 'allowTemplateLiterals': true }],
+		'semi'            : ['warn', 'always'],
+
+		/** Whitespace **/
+		'array-bracket-spacing' : ['warn', 'never'],
+		'arrow-spacing'         : ['warn', { before: false, after: false }],
+		'comma-spacing'         : ['warn', { before: false, after: true }],
+		'indent'                : ['warn', 'tab', { 'MemberExpression': 'off' }],
+		'keyword-spacing'       : ['warn', {
+			before    : true,
+			after     : true,
+			overrides : {
+				if : { 'before': false, 'after': false }
+			}
+		}],
+		'key-spacing' : ['warn', {
+			multiLine  : { beforeColon: true, afterColon: true, align: 'colon' },
+			singleLine : { beforeColon: false, afterColon: true }
+		}],
+		'linebreak-style'               : 'off',
+		'no-trailing-spaces'            : 'warn',
+		'no-whitespace-before-property' : 'warn',
+		'object-curly-spacing'          : ['warn', 'always'],
+		'react/jsx-indent-props'        : ['warn', 'tab'],
+		'space-in-parens'               : ['warn', 'never'],
+		'template-curly-spacing'        : ['warn', 'never'],
+	}
+};

.gitattributes

@@ -1,3 +1 @@
-package-lock.json binary
-
-*.json text eol=lf
+package-lock.json binary

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +0,0 @@
-contact_links:
-  - name: /r/Homebrewery Subreddit
-    url: https://www.reddit.com/r/homebrewery
-    about: The Homebrewery community on Reddit!
-  - name: Discord of Many Things
-    url: https://discord.gg/domt
-    about: "Join the conversation in the #formatting channel on DoMT!"

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,17 +0,0 @@
-name: Feature Request
-description: Have an idea to improve the Homebrewery? Let us know!
-labels: ["feature request"]
-body:
-  - type: markdown
-    attributes:
-      value: "We'd love to hear your idea!  Please be sure to [search the current Issues](https://github.com/naturalcrit/homebrewery/issues) for any duplicate requests."
-  - type: textarea
-    id: user-request
-    attributes:
-      label: "Your idea:"
-      description: The best feature requests provide an explanation of the current issue and then an explanation of how it could be improved.  Screenshots/images can be pasted right in as well!
-    validations:
-      required: true
-  - type: markdown
-    attributes:
-      value: "Please be sure to search for any close matches to your request in the GitHub Issues tracker before opening a new request, thanks!"

.github/ISSUE_TEMPLATE/general_issue.yml

@@ -1,55 +0,0 @@
-name: General Issue
-description: Report an issue unrelated to Saving
-body:
-  - type: markdown
-    attributes:
-      value: Please include as much information as possible.
-  - type: dropdown
-    id: renderer
-    attributes:
-      label: Renderer
-      description: Which renderer does this issue occur on?  If you are unsure, you can check the renderer in the Properties Editor (click the "i" in the Snippet Menu bar above the editor).
-      options:
-        - v3
-        - Legacy
-        - Both
-    validations:
-      required: true
-  - type: dropdown
-    id: browser
-    attributes:
-      label: Browser
-      description: Which browser were you using when the issue occurred?
-      options:
-        - Chrome
-        - Firefox
-        - Edge
-        - Safari
-        - other
-    validations:
-      required: true
-  - type: dropdown
-    id: operating-system
-    attributes:
-      label: Operating System
-      description: Which OS were you using when the issue occurred?
-      options:
-        - Windows
-        - MacOS
-        - Linux
-        - other
-    validations:
-      required: true
-  - type: textarea
-    id: user-description
-    attributes:
-      label: "What happened?"
-      description: Please include any steps you took leading up to the issue and if you can reproduce it.  Let us know what you expected to happen, and what did happen.
-    validations:
-      required: true
-  - type: textarea
-    id: code
-    attributes:
-      label: Code
-      description: Paste in any relevant code snippet below.
-      render: gfm

.github/ISSUE_TEMPLATE/save_issue.yml

@@ -1,26 +0,0 @@
-name: Saving Issue
-description: Report an issue Saving
-labels: ["Saving"]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Woops, sorry there was an issue Saving.  Please add any detail you can to this report and check back soon!
-  - type: textarea
-    id: error-code
-    attributes:
-      label: Error Code
-      render: shell
-  - type: textarea
-    id: user-description
-    attributes:
-      label: "Your description of what happened:"
-    validations:
-      required: true
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for the report.  Here are some steps that may help in the meantime:
-        1. Refreshing your Google credentials in Homebrewery by signing out, and back in (they expire after one year).
-        2. Waiting a few minutes and trying again - sometimes there is just a momentary blip in the server.
-        3. Check the Issues in Github or the /r/homebrewery subreddit to see if others are experiencing the same issue.

.github/actions/limit-pull-requests/action.yml

@@ -1,103 +0,0 @@
-name: Limit pull requests
-description: >
-  Limit the number of open pull requests to the repository created by a user
-author: ZhongRuoyu (from Homebrew repository)
-branding:
-  icon: alert-triangle
-  color: yellow
-
-inputs:
-  token:
-    description: GitHub token
-    required: false
-    default: ${{ github.token }}
-  except-users:
-    description: The users exempted from the limit, one per line
-    required: false
-  # https://docs.github.com/en/graphql/reference/enums#commentauthorassociation
-  except-author-associations:
-    description: The author associations exempted from the limit, one per line
-    required: false
-  comment-limit:
-    description: >
-      Post the comment when the user's number of open pull requests exceeds this
-      number and `comment` is not empty
-    required: true
-    default: "10"
-  comment:
-    description: The comment to post when the limit is reached
-    required: false
-  close-limit:
-    description: >
-      Close the pull request when the user's number of open pull requests
-      exceeds this number and `close` is set to `true`
-    required: true
-    default: "50"
-  close:
-    description: Whether to close the pull request when the limit is reached
-    required: true
-    default: "false"
-
-runs:
-  using: composite
-  steps:
-    - name: Check the number of pull requests
-      id: count-pull-requests
-      run: |
-        # If the user is exempted, assume they have no pull requests.
-        if grep -Fiqx '${{ github.actor }}' <<<"$EXCEPT_USERS"; then
-          echo "::notice::@${{ github.actor }} is exempted from the limit."
-          echo "count=0" >>"$GITHUB_OUTPUT"
-          exit 0
-        fi
-        if grep -Fiqx '${{ github.event.pull_request.author_association }}' <<<"$EXCEPT_AUTHOR_ASSOCIATIONS"; then
-          echo "::notice::@{{ github.actor }} is a ${{ github.event.pull_request.author_association }} exempted from the limit."
-          echo "count=0" >>"$GITHUB_OUTPUT"
-          exit 0
-        fi
-
-        count="$(
-          gh api \
-            --method GET \
-            --header 'Accept: application/vnd.github+json' \
-            --header 'X-GitHub-Api-Version: 2022-11-28' \
-            --field state=open \
-            --paginate \
-            '/repos/{owner}/{repo}/pulls' |
-            jq \
-              --raw-output \
-              --arg USER '${{ github.actor }}' \
-              'map(select(.user.login == $USER)) | length'
-        )"
-        echo "::notice::@${{ github.actor }} has $count open pull request(s)."
-        echo "count=$count" >>"$GITHUB_OUTPUT"
-      env:
-        GH_REPO: ${{ github.repository }}
-        GH_TOKEN: ${{ inputs.token }}
-        EXCEPT_USERS: ${{ inputs.except-users }}
-        EXCEPT_AUTHOR_ASSOCIATIONS: ${{ inputs.except-author-associations }}
-      shell: bash
-
-    - name: Comment on pull request
-      if: >
-        fromJSON(steps.count-pull-requests.outputs.count) > fromJSON(inputs.comment-limit) &&
-        inputs.comment != ''
-      run: |
-        gh pr comment '${{ github.event.pull_request.number }}' \
-          --body="${COMMENT_BODY}"
-      env:
-        GH_REPO: ${{ github.repository }}
-        GH_TOKEN: ${{ inputs.token }}
-        COMMENT_BODY: ${{ inputs.comment }}
-      shell: bash
-
-    - name: Close pull request
-      if: >
-        fromJSON(steps.count-pull-requests.outputs.count) > fromJSON(inputs.close-limit) &&
-        inputs.close == 'true'
-      run: |
-        gh pr close '${{ github.event.pull_request.number }}'
-      env:
-        GH_REPO: ${{ github.repository }}
-        GH_TOKEN: ${{ inputs.token }}
-      shell: bash

.github/pull_request_template.md

@@ -1,36 +0,0 @@
-<!--
-     Before submitting a Pull Request, please consider the following to speed up reviews:
-     - 👷‍♀️ Create small PRs. Large PRs can usually be broken down into incremental PRs.
-     - 🚩 Do you already have several open PRs? Consider finishing or asking for help with existing PRs first.
-     - 🔧 Does your PR reference a discussed and approved issue, especially for personal or edge-case requests?
-     - 💡 Is the solution agreed upon? Save rework time by discussing strategy before coding.
--->
-
-## Description
-
-
-## Related Issues or Discussions
-
-- Closes #
-
-## QA Instructions, Screenshots, Recordings
-
-_Please replace this line with instructions on how to test or view your changes, as well as any before/after
-images for UI changes._
-
-### Reviewer Checklist
-
-_Please replace the list below with specific features you want reviewers to look at._
-
-*Reviewers, refer to this list when testing features, or suggest new items *
-- [ ] Verify new features are functional
-  - [ ] Feature A does X
-  - [ ] Feature B does Y
-- [ ] Verify old features have not broken
-  - [ ] Feature Z can still be used
-- [ ] Test for edge cases / try to break things
-  - [ ] Feature A handles negative numbers
-- [ ] Identify opportunities for simplification and refactoring
-- [ ] Check for code legibility and appropriate comments
-
-<details><summary>Copy this list</summary>

.github/workflows/pr-check.yml

@@ -1,29 +0,0 @@
-name: PR Check
-on: pull_request_target
-env:
-  GH_REPO: ${{ github.repository }}
-  GH_NO_UPDATE_NOTIFIER: 1
-  GH_PROMPT_DISABLED: 1
-permissions:
-  contents: read
-  issues: write
-  pull-requests: write
-  statuses: write
-jobs:
-  limit-pull-requests:
-    if: always() && github.repository_owner == 'naturalcrit'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name : Run limit-pull-requests action
-        uses: ./.github/actions/limit-pull-requests
-        with:
-          except-users: |
-            dependabot
-          comment-limit: 3
-          comment: |
-            Hi, thanks for your contribution to the Homebrewery! You already have >=3 open pull requests. Consider completing some of your existing PRs before opening new ones. Thanks!
-          close-limit: 5
-          close: false

.gitignore

@@ -11,6 +11,3 @@ config/docker.*
 todo.md
 startDB.bat
 startMViewer.bat
-.vscode
-
-coverage

.stylelintrc.json

@@ -1,48 +0,0 @@
-{
-    "extends": [
-			"stylelint-config-recess-order",
-			"stylelint-config-recommended"],
-    "plugins": [
-			"@stylistic/stylelint-plugin",
-      "./stylelint_plugins/declaration-colon-align.js",
-			"./stylelint_plugins/declaration-colon-min-space-before",
-      "./stylelint_plugins/declaration-block-multi-line-min-declarations"
-    ],
-    "customSyntax": "postcss-less",
-    "rules": {
-			"no-descending-specificity"                                : null,
-			"at-rule-no-unknown"                                       : null,
-			"function-no-unknown"                                      : null,
-			"font-family-no-missing-generic-family-keyword"            : null,
-			"font-weight-notation"                                     : "named-where-possible",
-			"font-family-name-quotes"                                  : "always-unless-keyword",
-			"@stylistic/indentation"                                    : "tab",
-			"no-duplicate-selectors"                                   : true,
-			"@stylistic/color-hex-case"                                 : "upper",
-			"color-hex-length"                                         : "long",
-			"@stylistic/selector-combinator-space-after"                : "always",
-			"@stylistic/selector-combinator-space-before"               : "always",
-			"@stylistic/selector-attribute-operator-space-before"       : "never",
-			"@stylistic/selector-attribute-operator-space-after"        : "never",
-			"@stylistic/selector-attribute-brackets-space-inside"       : "never",
-			"selector-attribute-quotes"                                : "always",
-			"selector-pseudo-element-colon-notation"                   : "double",
-			"@stylistic/selector-pseudo-class-parentheses-space-inside" : "never",
-			"@stylistic/block-opening-brace-space-before"               : "always",
-			"naturalcrit/declaration-colon-min-space-before"           : 1,
-			"@stylistic/declaration-block-trailing-semicolon"           : "always",
-			"@stylistic/declaration-colon-space-after"                  : "always",
-			"@stylistic/number-leading-zero"                            : "always",
-			"function-url-quotes"                                      : ["always", { "except": ["empty"] }],
-			"function-url-scheme-disallowed-list"                      : ["data","http"],
-			"comment-whitespace-inside"                                : "always",
-			"@stylistic/string-quotes"                                  : "single",
-			"@stylistic/media-feature-range-operator-space-before"      : "always",
-			"@stylistic/media-feature-range-operator-space-after"       : "always",
-			"@stylistic/media-feature-parentheses-space-inside"         : "never",
-			"@stylistic/media-feature-colon-space-before"               : "always",
-			"@stylistic/media-feature-colon-space-after"                : "always",
-			"naturalcrit/declaration-colon-align"                      : true,
-			"naturalcrit/declaration-block-multi-line-min-declarations": 1
-    }
-}

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:16.11-alpine
 RUN apk --no-cache add git
 
 ENV NODE_ENV=docker
@@ -10,11 +10,11 @@ WORKDIR /usr/src/app
 # This improves caching so we don't have to download the dependencies every time the code changes
 COPY package.json ./
 # --ignore-scripts tells yarn not to run postbuild.  We run it explicitly later
-RUN npm install --ignore-scripts
+RUN yarn install --ignore-scripts
 
 # Bundle app source and build application
 COPY . .
-RUN npm run build
+RUN yarn build
 
 EXPOSE 8000
-CMD [ "npm", "start" ]
+CMD [ "yarn", "start" ]

README.md

@@ -9,42 +9,37 @@ using [Markdown][markdown-url]. It is distributed under the terms of the [MIT Li
 [markdown-url]: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
 
 ## Quick Start
-The easiest way to get started using The Homebrewery is to use it
+The easiest way to get started using the Homebrewery is to use it
 [on our website][homebrewery-url]. The code is open source, so feel free to
-clone it and tinker with it. If you want to make changes to the code, you can run
+clone it, tinker with it. If you want to make changes to the code, you can run
 your own local version for testing by following the installation instructions
 below.
 
 [homebrewery-url]: https://homebrewery.naturalcrit.com
 
 ### Installation
-First, install three programs that The Homebrewery requires to run and retrieve
+First, install three programs that the Homebrewery requires to run and retrieve
 updates:
 
-1. install [node](https://nodejs.org/en/), version v16 or higher.
+1. install [node](https://nodejs.org/en/)
 1. install [mongodb](https://www.mongodb.com/try/download/community) (Community version)
 
-    For the easiest installation, follow these steps:
-    1. In the installer, uncheck the option to run as a service.
-    1. You can install MongoDB Compass if you want a GUI to view your database documents.
-    1. If you install any version over 6.0, you will have to install [MongoDB Shell](https://www.mongodb.com/try/download/shell).
-    1. Go to the C:\ drive and create a folder called "data".
-    1. Inside the "data" folder, create a new folder called "db".
-    1. Open a command prompt or other terminal and navigate to your MongoDB install folder (C:\Program Files\Mongo\Server\6.0\bin).
-    1. In the command prompt, run "mongod", which will start up your local database server.
-    1. While MongoD is running, open a second command prompt and navigate to the MongoDB install folder.
-    1. Search in Windows for "Advanced system settings" and open it.
-    1. Click "Environment variables", find the "path" variable, and double-click to open it.
-    1. Click "New" and paste in the path to the MongoDB "bin" folder.
-    1. Click "OK" three times to close all the windows.
-    1. In the second command prompt, run "mongo", which allows you to edit the database.
-    1. Type `use homebrewery` to create The Homebrewery database. You should see `switched to db homebrewery`.
-    1. Type `db.brews.insertOne({"title":"test"})` to create a blank document. You should see `{
-acknowledged: true,
-insertedId: ObjectId("63c2fce9e5ac5a94fe2410cf")
-}`
-   
-1. install [git](https://git-scm.com/downloads) (select the option that allows Git to run from the command prompt).
+    For easiest installation, follow these steps:
+    1. In the installer, uncheck the option to run as a service
+    1. You can install MongoDB Compass if you want a GUI to view your database documents
+    1. Go to the C drive and create a folder called "data"
+    1. Inside the "data" folder, create a new folder called "db"
+    1. Open a command prompt or other terminal and navigate to your mongodb install folder (c:program files\mongo\server\4.4\bin)
+    1. In the command prompt, run "mongod", which will start up your local database server
+    1. While MongoD is running, open a second command prompt and navigate to the mongodb install folder
+    1. In the second command prompt, run "mongo", which allows you to edit the database
+    1. Type `use homebrewery` to create the homebrewery database. You should see `switched to db homebrewery`
+    1. Type `db.brews.insert({"title":"test"})` to create a blank document. You should see `WriteResult({ "nInserted" : 1 })`
+    1. Search in Windows for "Advanced system settings" and open it
+    1. Click "Environment variables", find the "path" variable, and double-click to open it
+    1. Click "New" and paste in the path to the mongodb "bin" folder
+    1. Click "OK", "OK", "OK" to close all the windows
+1. install [git](https://git-scm.com/downloads) (select the option that allows Git to run from the command prompt)
 
 Checkout the repo ([documentation][github-clone-repo-docs-url]):
 ```
@@ -56,18 +51,10 @@ git clone https://github.com/naturalcrit/homebrewery.git
 Second, you will need to add the environment variable `NODE_ENV=local` to allow
 the project to run locally.
 
-You can set this **temporarily** (until you close the terminal) in your shell of choice with admin privileges:
+You can set this temporarily in your shell of choice:
 * Windows Powershell: `$env:NODE_ENV="local"`
 * Windows CMD: `set NODE_ENV=local`
-* Linux / macOS: `export NODE_ENV=local`
-
-If you want to add this variable **permanently** the steps are as follows:
-    1. Search in Windows for "Advanced system settings" and open it.
-    1. Click "Environment variables".
-    1. In System Variables, click "New"
-    1. Click "New" and write `NODE_ENV` as a name and `local` as the value.
-    1. Click "OK" three times to close all the windows.
-  This can be undone at any time if needed.
+* Linux / OSX: `export NODE_ENV=local`
 
 Third, you will need to install the Node dependencies, compile the app, and run
 it using the two commands:
@@ -76,14 +63,7 @@ it using the two commands:
 1. `npm start`
 
 You should now be able to go to [http://localhost:8000](http://localhost:8000)
-in your browser and use The Homebrewery offline.
-
-If you had any issue at all, here are some links that may be useful:
-- [Course](https://learn.mongodb.com/courses/m103-basic-cluster-administration) on cluster administration, useful for beginners
-- [Mongo community forums](https://www.mongodb.com/community/forums/)
-- Useful Stack Overflow links for your most probable errors: [1](https://stackoverflow.com/questions/44962540/mongod-and-mongo-commands-not-working-on-windows-10), [2](https://stackoverflow.com/questions/15053893/mongo-command-not-recognized-when-trying-to-connect-to-a-mongodb-server/41507803#41507803), [3](https://stackoverflow.com/questions/51224959/mongo-is-not-recognized-as-an-internal-or-external-command-operable-program-o)
-
-If you still have problems, post in [Our Subreddit](https://www.reddit.com/r/homebrewery/) and we will help you.
+in your browser and use the Homebrewery offline.
 
 ### Running the application via Docker
 
@@ -115,11 +95,11 @@ You can check out the [changelog](./changelog.md).
 
 ## License
 
-This project is licensed under the [MIT license](./license), which means you
+This project is licensed under the [MIT license](./license). Which means you
 are free to use The Homebrewery in any way that you want, except for claiming
 that you made it yourself.
 
-If you wish to sell, or in some way gain profit for, what's created on this site,
+If you wish to sell or in some way gain profit for what's created on this site,
 it's your responsibility to ensure you have the proper licenses/rights for any
 images or resources used.
 
@@ -128,12 +108,13 @@ images or resources used.
 You are welcome to contribute to the development and maintenance of the
 project! There are several ways of doing that:
 - At the moment, we have a huge backlog of [issues][repo-issues-url] and some
-  of them are outdated, duplicates, or don't contain any useful info. To help, you can [mark duplicates][github-mark-duplicate-url], try to
-  reproduce some complex or weird issues, try finding a workaround for a
-  reported bug, or just mention our issue managers team to let them know about
-  outdated issues via `@naturalcrit/issue-managers`.
+  of them are outdated, duplicates or doesn't contain any useful info. In order
+  to help you can [mark duplicates][github-mark-duplicate-url], try to
+  reproduce some complex or weird issues, try with finding a workaround for a
+  reported bug or just mention issue managers team to let them know about
+  outdated issue via `@naturalcrit/issue-managers`.
 - Our [subreddit][subreddit-url] is constantly growing and there are number of
-  bug reports. Any help with sorting them out is very welcome.
+  bug reports: any help with sorting them out is very welcome.
 - And of course you can contribute by fixing a bug or implementing a new
   feature by yourself, we are waiting for your
   [pull requests][github-pr-docs-url]!

client/admin/admin.jsx

@@ -2,44 +2,35 @@ require('./admin.less');
 const React = require('react');
 const createClass = require('create-react-class');
 
-const BrewUtils = require('./brewUtils/brewUtils.jsx');
-const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
 
-const tabGroups = ['brew', 'notifications'];
+const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
+const BrewLookup = require('./brewLookup/brewLookup.jsx');
+const BrewCompress = require ('./brewCompress/brewCompress.jsx');
+const Stats = require('./stats/stats.jsx');
 
 const Admin = createClass({
 	getDefaultProps : function() {
 		return {};
 	},
 
-	getInitialState : function(){
-		return ({
-			currentTab : 'brew'
-		});
-	},
-
-	handleClick : function(newTab){
-		if(this.state.currentTab === newTab) return;
-		this.setState({
-			currentTab : newTab
-		});
-	},
-
 	render : function(){
 		return <div className='admin'>
+
 			<header>
 				<div className='container'>
 					<i className='fas fa-rocket' />
 					homebrewery admin
 				</div>
 			</header>
-			<main className='container'>
-				<nav className='tabs'>
-					{tabGroups.map((tab, idx)=>{ return <button className={tab===this.state.currentTab ? 'active' : ''} key={idx} onClick={()=>{ return this.handleClick(tab); }}>{tab.toUpperCase()}</button>; })}
-				</nav>
-				{this.state.currentTab==='brew' && <BrewUtils />}
-				{this.state.currentTab==='notifications' && <NotificationUtils />}
-			</main>
+			<div className='container'>
+				<Stats />
+				<hr />
+				<BrewLookup />
+				<hr />
+				<BrewCleanup />
+				<hr />
+				<BrewCompress />
+			</div>
 		</div>;
 	}
 });

client/admin/admin.less

@@ -6,95 +6,39 @@
 
 @import 'font-awesome/css/font-awesome.css';
 
-html,body, #reactContainer, .naturalCrit { min-height : 100%; }
+html,body, #reactContainer, .naturalCrit{
+	min-height : 100%;
+}
 
 @sidebarWidth : 250px;
 
-body {
-	height           : 100%;
-	padding          : 0;
-	margin           : 0;
+body{
+	background-color : #eee;
 	font-family      : 'Open Sans', sans-serif;
+	color            : #4b5055;
 	font-weight      : 100;
-	color            : #4B5055;
-	background-color : #EEEEEE;
 	text-rendering   : optimizeLegibility;
+	margin           : 0;
+	padding          : 0;
+	height : 100%;
 }
 
-:where(.admin) {
+.admin{
 
-	header {
-		padding          : 20px 0px;
-		margin-bottom    : 30px;
-		font-size        : 2em;
-		color            : white;
+	header{
 		background-color : @red;
-		i { margin-right : 30px; }
-	}
-
-	hr { margin : 30px 0px; }
-
-	:where(.container) {
-		input {
-			height        : 33px;
-			padding       : 0px 10px;
-			margin-bottom : 20px;
-			font-family   : monospace;
-		}
-
-		button {
-			height         : 37px;
-			vertical-align : middle;
-		}
-
-		dl {
-			@maxItemWidth : 132px;
-			dt {
-				float      : left;
-				width      : @maxItemWidth;
-				clear      : left;
-				text-align : right;
-				&::after { content : ' : '; }
-			}
-			dd {
-				height      : 1em;
-				padding     : 0 0 0.5em 0;
-				margin-left : @maxItemWidth + 6px;
-			}
-		}
-
-		.tabs button {
-			margin-right     : 3px;
-			margin-left      : 3px;
-			color            : black;
-			background-color : #EEEEEE;
-			border           : 1px solid #444444;
-			border-radius    : 5px;
-			&:hover {
-				color            : #EEEEEE;
-				background-color : #444444;
-			}
-			&.active {
-				margin-right     : 2px;
-				margin-left      : 2px;
-				text-decoration  : underline;
-				background-color : #CCCCCC;
-				border           : 2px solid #444444;
-			}
-		}
-
-		.notificationUtils {
-			display         : flex;
-			gap             : 50px;
-			justify-content : space-between;
+		font-size: 2em;
+		padding : 20px 0px;
+		color : white;
+		margin-bottom: 30px;
+		i{
+			margin-right: 30px;
 		}
 	}
 
-	.error {
-		background: rgb(178, 54, 54);
-		color:white;
-		font-weight: 900;
-		margin-block:10px;
-		padding:10px;
+	hr{
+		margin : 30px 0px;
 	}
+
+
 }

client/admin/brewCleanup/brewCleanup.jsx

@@ -1,6 +1,7 @@
 require('./brewCleanup.less');
 const React       = require('react');
 const createClass = require('create-react-class');
+const cx          = require('classnames');
 
 const request = require('superagent');
 

client/admin/brewCleanup/brewCleanup.less

@@ -0,0 +1,10 @@
+.BrewCleanup{
+	.removeBox{
+		margin-top: 20px;
+		button{
+			background-color: @red;
+			margin-right: 10px;
+		}
+	}
+
+}

client/admin/brewCompress/brewCompress.jsx

@@ -1,6 +1,7 @@
 require('./brewCompress.less');
 const React       = require('react');
 const createClass = require('create-react-class');
+const cx          = require('classnames');
 
 const request = require('superagent');
 

client/admin/brewCompress/brewCompress.less

@@ -0,0 +1,10 @@
+.BrewCompress{
+	.removeBox{
+		margin-top: 20px;
+		button{
+			background-color: @red;
+			margin-right: 10px;
+		}
+	}
+
+}

client/admin/brewLookup/brewLookup.jsx

@@ -1,3 +1,4 @@
+require('./brewLookup.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const cx    = require('classnames');

client/admin/brewLookup/brewLookup.less

@@ -0,0 +1,30 @@
+
+.brewLookup{
+	input{
+		height        : 33px;
+		margin-bottom : 20px;
+		padding       : 0px 10px;
+		font-family   : monospace;
+	}
+	button{
+		vertical-align : middle;
+		height         : 37px;
+	}
+	dl{
+		@maxItemWidth : 132px;
+		dt{
+			float      : left;
+			clear      : left;
+			width      : @maxItemWidth;
+			text-align : right;
+			&::after {
+				content: " : ";
+			}
+		}
+		dd{
+			height      : 1em;
+			margin-left : @maxItemWidth + 6px;
+			padding     : 0 0 0.5em 0;
+		}
+	}
+}

client/admin/brewUtils/brewCleanup/brewCleanup.less

@@ -1,9 +0,0 @@
-.BrewCleanup {
-	.removeBox {
-		margin-top : 20px;
-		button {
-			margin-right     : 10px;
-			background-color : @red;
-		}
-	}
-}

client/admin/brewUtils/brewCompress/brewCompress.less

@@ -1,9 +0,0 @@
-.BrewCompress {
-	.removeBox {
-		margin-top : 20px;
-		button {
-			margin-right     : 10px;
-			background-color : @red;
-		}
-	}
-}

client/admin/brewUtils/brewUtils.jsx

@@ -1,24 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-
-
-const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
-const BrewLookup = require('./brewLookup/brewLookup.jsx');
-const BrewCompress = require ('./brewCompress/brewCompress.jsx');
-const Stats = require('./stats/stats.jsx');
-
-const BrewUtils = createClass({
-	render : function(){
-		return <>
-			<Stats />
-			<hr />
-			<BrewLookup />
-			<hr />
-			<BrewCleanup />
-			<hr />
-			<BrewCompress />
-		</>;
-	}
-});
-
-module.exports = BrewUtils;

client/admin/brewUtils/stats/stats.less

@@ -1,13 +0,0 @@
-
-.Stats {
-	position : relative;
-	
-	.pending {
-		position         : absolute;
-		top              : 0px;
-		left             : 0px;
-		width            : 100%;
-		height           : 100%;
-		background-color : rgba(238,238,238, 0.5);
-	}
-}

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -1,109 +0,0 @@
-require('./notificationAdd.less');
-const React = require('react');
-const { useState, useRef } = require('react');
-const request = require('superagent');
-
-const NotificationAdd = ()=>{
-	const [notificationResult, setNotificationResult] = useState(null);
-	const [searching, setSearching] = useState(false);
-	const [error, setError] = useState(null);
-
-	const dismissKeyRef = useRef(null);
-	const titleRef = useRef(null);
-	const textRef = useRef(null);
-	const startAtRef = useRef(null);
-	const stopAtRef = useRef(null);
-
-	const saveNotification = async ()=>{
-		const dismissKey = dismissKeyRef.current.value;
-		const title = titleRef.current.value;
-		const text = textRef.current.value;
-		const startAt = new Date(startAtRef.current.value);
-		const stopAt = new Date(stopAtRef.current.value);
-
-		// Basic validation
-		if(!dismissKey || !title || !text || isNaN(startAt.getTime()) || isNaN(stopAt.getTime())) {
-			setError('All fields are required');
-			return;
-		}
-		if(startAt >= stopAt) {
-			setError('End date must be after the start date!');
-			return;
-		}
-
-		const data = {
-			dismissKey,
-			title,
-			text,
-			startAt : startAt?.toISOString() ?? '',
-			stopAt  : stopAt?.toISOString() ?? '',
-		};
-
-		try {
-			setSearching(true);
-			setError(null);
-			const response = await request.post('/admin/notification/add').send(data);
-			console.log(response.body);
-
-			// Reset form fields
-			dismissKeyRef.current.value = '';
-			titleRef.current.value = '';
-			textRef.current.value = '';
-
-			setNotificationResult('Notification successfully created.');
-			setSearching(false);
-		} catch (err) {
-			console.log(err.response.body.message);
-			setError(`Error saving notification: ${err.response.body.message}`);
-			setSearching(false);
-		}
-	};
-
-	return (
-		<div className='notificationAdd'>
-			<h2>Add Notification</h2>
-
-			<label className='field'>
-				Dismiss Key:
-				<input className='fieldInput' type='text' ref={dismissKeyRef} required
-					placeholder='GOOGLEDRIVENOTIF'
-				/>
-			</label>
-
-			<label className='field'>
-				Title:
-				<input className='fieldInput' type='text' ref={titleRef} required
-					placeholder='Stop using Google Drive as image host'
-				/>
-			</label>
-
-			<label className='field'>
-				Text:
-				<textarea className='fieldInput' type='text' ref={textRef} required
-					placeholder='Google Drive is not an image hosting site, you should not use it as such.'
-				>
-				</textarea>
-			</label>
-
-			<label className='field'>
-				Start Date:
-				<input type='date' className='fieldInput' ref={startAtRef} required/>
-			</label>
-
-			<label className='field'>
-				End Date:
-				<input type='date' className='fieldInput' ref={stopAtRef} required/>
-			</label>
-
-			<div className='notificationResult'>{notificationResult}</div>
-
-			<button className='notificationSave' onClick={saveNotification} disabled={searching}>
-				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-save'}`}/>
-				Save Notification
-			</button>
-			{error && <div className='error'>{error}</div>}
-		</div>
-	);
-};
-
-module.exports = NotificationAdd;

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -1,37 +0,0 @@
-.notificationAdd {
-	position       : relative;
-	display        : flex;
-	flex-direction : column;
-	width          : 500px;
-
-	.field {
-		display               : grid;
-		grid-template-columns : 120px 150px;
-		align-items           : center;
-		justify-items         : stretch;
-		width                 : 100%;
-		margin-bottom         : 20px;
-   
-	
-		input {
-			height        : 33px;
-			padding       : 0px 10px;
-			margin-bottom : unset;
-			font-family   : monospace;
-		}
-	
-		textarea {
-			width      : 50ch;
-			min-height : 7em;
-			max-height : 20em;
-			resize     : vertical;
-			padding	   : 10px;
-		}
-	}
-
-	button {
-	width: 200px;
-		
-		i { margin-right : 10px; }
-	}
-}

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -1,105 +0,0 @@
-require('./notificationLookup.less');
-
-const React = require('react');
-const { useState } = require('react');
-const request = require('superagent');
-const Moment = require('moment');
-
-const NotificationDetail = ({ notification, onDelete })=>(
-	<>
-		<dl>
-			<dt>Key</dt>
-			<dd>{notification.dismissKey}</dd>
-
-			<dt>Title</dt>
-			<dd>{notification.title || 'No Title'}</dd>
-
-			<dt>Text</dt>
-			<dd>{notification.text || 'No Text'}</dd>
-
-			<dt>Created</dt>
-			<dd>{Moment(notification.createdAt).format('LLLL')}</dd>
-
-			<dt>Start</dt>
-			<dd>{Moment(notification.startAt).format('LLLL') || 'No Start Time'}</dd>
-
-			<dt>Stop</dt>
-			<dd>{Moment(notification.stopAt).format('LLLL') || 'No End Time'}</dd>
-		</dl>
-		<button onClick={()=>onDelete(notification.dismissKey)}>DELETE</button>
-	</>
-);
-
-const NotificationLookup = ()=>{
-	const [searching, setSearching] = useState(false);
-	const [error, setError] = useState(null);
-	const [notifications, setNotifications] = useState([]);
-
-	const lookupAll = async ()=>{
-		setSearching(true);
-		setError(null);
-
-		try {
-			const res = await request.get('/admin/notification/all');
-			setNotifications(res.body || []);
-		} catch (err) {
-			console.log(err);
-			setError(`Error looking up notifications: ${err.response.body.message}`);
-		} finally {
-			setSearching(false);
-		}
-	};
-
-	const deleteNotification = async (dismissKey)=>{
-		if(!dismissKey) return;
-
-		const confirmed = window.confirm(
-			`Really delete notification ${dismissKey}?`
-		);
-		if(!confirmed) {
-			console.log('Delete notification cancelled');
-			return;
-		}
-		console.log('Delete notification confirm');
-		try {
-			await request.delete(`/admin/notification/delete/${dismissKey}`);
-			lookupAll();
-		} catch (err) {
-			console.log(err);
-			setError(`Error deleting notification: ${err.response.body.message}`);
-		};
-	};
-
-	const renderNotificationsList = ()=>{
-		if(error)
-			return <div className='error'>{error}</div>;
-
-		if(notifications.length === 0)
-			return <div className='noNotification'>No notifications available.</div>;
-
-		return (
-			<ul className='notificationList'>
-				{notifications.map((notification)=>(
-					<li key={notification.dismissKey} >
-						<details>
-							<summary>{notification.title || 'No Title'}</summary>
-							<NotificationDetail notification={notification} onDelete={deleteNotification} />
-						</details>
-					</li>
-				))}
-			</ul>
-		);
-	};
-
-	return (
-		<div className='notificationLookup'>
-			<h2>Check all Notifications</h2>
-			<button onClick={lookupAll}>
-				<i className={`fas ${searching ? 'fa-spin fa-spinner' : 'fa-search'}`} />
-			</button>
-			{renderNotificationsList()}
-		</div>
-	);
-};
-
-module.exports = NotificationLookup;

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -1,40 +0,0 @@
-
-.notificationLookup {
-	width     : 450px;
-	height	  : fit-content;
-
-	.notificationList {
-		display        : flex;
-		flex-direction : column;
-		max-height     : 500px;
-		margin-block   : 20px;
-		overflow       : auto;
-		border         : 1px solid;
-		border-radius  : 5px;
-		
-		li {
-			padding    : 10px;
-			background : #CCCCCC;
-				
-			&:nth-child(even) { background : #DDDDDD; }
-			&:first-child {
-				border-top-left-radius  : 5px;
-				border-top-right-radius : 5px;
-			}
-			&:last-child {
-				border-bottom-right-radius : 5px;
-				border-bottom-left-radius  : 5px;
-			}
-				
-			summary {
-				font-size   : 20px;
-				font-weight : 900;
-			}
-
-			dl dt{
-				font-weight: 900;
-			}
-		}
-	}
-	.noNotification { margin-block : 20px; }
-}

client/admin/notificationUtils/notificationUtils.jsx

@@ -1,15 +0,0 @@
-const React = require('react');
-
-const NotificationLookup = require('./notificationLookup/notificationLookup.jsx');
-const NotificationAdd = require('./notificationAdd/notificationAdd.jsx');
-
-const NotificationUtils = ()=>{
-	return (
-		<section className='notificationUtils'>
-			<NotificationAdd />
-			<NotificationLookup />
-		</section>
-	);
-};
-
-module.exports = NotificationUtils;

client/admin/stats/stats.less

@@ -0,0 +1,28 @@
+
+.Stats{
+	position : relative;
+	.pending{
+		position         : absolute;
+		top              : 0px;
+		left             : 0px;
+		height           : 100%;
+		width            : 100%;
+		background-color : rgba(238,238,238, 0.5);
+	}
+	dl{
+		@maxItemWidth : 132px;
+		dt{
+			float      : left;
+			clear      : left;
+			width      : @maxItemWidth;
+			text-align : right;
+			&::after {
+				content: " : ";
+			}
+		}
+		dd{
+			margin  : 0 0 0 @maxItemWidth + 10px;
+			padding : 0 0 0.5em 0;
+		}
+	}
+}

client/components/combobox.jsx

@@ -1,128 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
-require('./combobox.less');
-
-const Combobox = createClass({
-	displayName     : 'Combobox',
-	getDefaultProps : function() {
-		return {
-			className   : '',
-			trigger     : 'hover',
-			default     : '',
-			placeholder : '',
-			autoSuggest : {
-				clearAutoSuggestOnClick : true,
-				suggestMethod           : 'includes',
-				filterOn                : []  // should allow as array to filter on multiple attributes, or even custom filter
-			},
-		};
-	},
-	getInitialState : function() {
-		return {
-			showDropdown : false,
-			value        : '',
-			options      : [...this.props.options],
-			inputFocused : false
-		};
-	},
-	componentDidMount : function() {
-		if(this.props.trigger == 'click')
-			document.addEventListener('click', this.handleClickOutside);
-		this.setState({
-			value : this.props.default
-		});
-	},
-	componentWillUnmount : function() {
-		if(this.props.trigger == 'click')
-			document.removeEventListener('click', this.handleClickOutside);
-	},
-	handleClickOutside : function(e){
-		// Close dropdown when clicked outside
-		if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
-			this.handleDropdown(false);
-		}
-	},
-	handleDropdown : function(show){
-		this.setState({
-			showDropdown : show,
-			inputFocused : this.props.autoSuggest.clearAutoSuggestOnClick ? show : false
-		});
-	},
-	handleInput : function(e){
-		e.persist();
-		this.setState({
-			value        : e.target.value,
-			inputFocused : false
-		}, ()=>{
-			this.props.onEntry(e);
-		});
-	},
-	handleSelect : function(e){
-		this.setState({
-			value : e.currentTarget.getAttribute('data-value')
-		}, ()=>{this.props.onSelect(this.state.value);});
-		;
-	},
-	renderTextInput : function(){
-		return (
-			<div className='dropdown-input item'
-				onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
-				onClick=     {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}>
-				<input
-					type='text'
-					onChange={(e)=>this.handleInput(e)}
-					value={this.state.value || ''}
-					placeholder={this.props.placeholder}
-					onBlur={(e)=>{
-						if(!e.target.checkValidity()){
-							this.setState({
-								value : this.props.default
-							}, ()=>this.props.onEntry(e));
-						}
-					}}
-				/>
-			</div>
-		);
-	},
-	renderDropdown : function(dropdownChildren){
-		if(!this.state.showDropdown) return null;
-		if(this.props.autoSuggest && !this.state.inputFocused){
-			const suggestMethod = this.props.autoSuggest.suggestMethod;
-			const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn;
-			const filteredArrays = filterOn.map((attr)=>{
-				const children = dropdownChildren.filter((item)=>{
-					if(suggestMethod === 'includes'){
-						return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase());
-					} else if(suggestMethod === 'startsWith'){
-						return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase());
-					}
-				});
-				return children;
-			});
-			dropdownChildren = _.uniq(filteredArrays.flat(1));
-		}
-
-		return (
-			<div className='dropdown-options'>
-				{dropdownChildren}
-			</div>
-		);
-	},
-	render : function () {
-		const dropdownChildren = this.state.options.map((child, i)=>{
-			const clone = React.cloneElement(child, { onClick: (e)=>this.handleSelect(e) });
-			return clone;
-		});
-		return (
-			<div className={`dropdown-container ${this.props.className}`}
-				ref='dropdown'
-				onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}>
-				{this.renderTextInput()}
-				{this.renderDropdown(dropdownChildren)}
-			</div>
-		);
-	}
-});
-
-module.exports = Combobox;

client/components/combobox.less

@@ -1,50 +0,0 @@
-.dropdown-container {
-    position:relative;
-    input {
-        width: 100%;
-    }
-    .dropdown-options {
-        position:absolute;
-        background-color: white;
-        z-index: 100;
-        width: 100%;
-        border: 1px solid gray;
-        overflow-y: auto;
-        max-height: 200px;
-
-        &::-webkit-scrollbar {
-          width: 14px;
-        }
-        &::-webkit-scrollbar-track {
-          background: #ffffff;
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: #949494;
-          border-radius: 10px;
-          border: 3px solid #ffffff;
-        }
-
-        .item {
-            position:relative;
-            font-size: 11px;
-            font-family: Open Sans;
-            padding: 5px;
-            cursor: default;
-            margin: 0 3px;
-            //border-bottom: 1px solid darkgray;
-            &:hover {
-                filter: brightness(120%);
-                background-color: rgb(163, 163, 163);
-            }
-            .detail {
-                width:100%;
-                text-align: left;
-                color: rgb(124, 124, 124);
-                font-style:italic;
-                font-size: 9px;
-            }
-        }
-
-    }
-
-}

client/components/dialog.jsx

@@ -1,29 +0,0 @@
-// Dialog box, for popups and modal blocking messages
-const React = require('react');
-const { useRef, useEffect } = React;
-
-function Dialog({ dismissKey, closeText = 'Close', blocking = false, ...rest }) {
-	const dialogRef = useRef(null);
-
-	useEffect(()=>{
-		if(!dismissKey || !localStorage.getItem(dismissKey)) {
-			blocking ? dialogRef.current?.showModal() : dialogRef.current?.show();
-		}
-	}, []);
-
-	const dismiss = ()=>{
-		dismissKey && localStorage.setItem(dismissKey, true);
-		dialogRef.current?.close();
-	};
-
-	return	(
-		<dialog ref={dialogRef} onCancel={dismiss} {...rest}>
-			{rest.children}
-			<button className='dismiss' onClick={dismiss}>
-				{closeText}
-			</button>
-		</dialog>
-	);
-};
-
-export default Dialog;

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,242 +1,223 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./brewRenderer.less');
 const React = require('react');
-const { useState, useRef, useCallback, memo } = React;
+const createClass = require('create-react-class');
 const _ = require('lodash');
+const cx = require('classnames');
 
 const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
-const ToolBar  = require('./toolBar/toolBar.jsx');
 
 //TODO: move to the brew renderer
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
 const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 const Frame = require('react-frame-component').default;
-const dedent = require('dedent-tabs').default;
-const { printCurrentBrew } = require('../../../shared/helpers.js');
-
-const DOMPurify = require('dompurify');
-const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
 
 const PAGE_HEIGHT = 1056;
+const PPR_THRESHOLD = 50;
 
-const INITIAL_CONTENT = dedent`
-	<!DOCTYPE html><html><head>
-	<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
-	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
-	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
-	<base target=_blank>
-	</head><body style='overflow: hidden'><div></div></body></html>`;
+const BrewRenderer = createClass({
+	displayName     : 'BrewRenderer',
+	getDefaultProps : function() {
+		return {
+			text     : '',
+			style    : '',
+			renderer : 'legacy',
+			errors   : []
+		};
+	},
+	getInitialState : function() {
+		let pages;
+		if(this.props.renderer == 'legacy') {
+			pages = this.props.text.split('\\page');
+		} else {
+			pages = this.props.text.split(/^\\page$/gm);
+		}
 
-//v=====----------------------< Brew Page Component >---------------------=====v//
-const BrewPage = (props)=>{
-	props = {
-		contents : '',
-		index    : 0,
-		...props
-	};
-	const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig);
-	return <div className={props.className} id={`p${props.index + 1}`} >
-	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
-	       </div>;
-};
+		return {
+			viewablePageNumber : 0,
+			height             : 0,
+			isMounted          : false,
 
+			pages          : pages,
+			usePPR         : pages.length >= PPR_THRESHOLD,
+			visibility     : 'hidden',
+			initialContent : `<!DOCTYPE html><html><head>
+												<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
+												<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
+												<link href='/homebrew/bundle.css' rel='stylesheet' />
+												<base target=_blank>
+												</head><body style='overflow: hidden'><div></div></body></html>`
+		};
+	},
+	height     : 0,
+	lastRender : <div></div>,
 
-//v=====--------------------< Brew Renderer Component >-------------------=====v//
-const renderedPages = [];
-let rawPages      = [];
+	componentWillUnmount : function() {
+		window.removeEventListener('resize', this.updateSize);
+	},
 
-const BrewRenderer = memo((props)=>{
-	props = {
-		text                       : '',
-		style                      : '',
-		renderer                   : 'legacy',
-		theme                      : '5ePHB',
-		lang                       : '',
-		errors                     : [],
-		currentEditorCursorPageNum : 1,
-		currentEditorViewPageNum   : 1,
-		currentBrewRendererPageNum : 1,
-		themeBundle                : {},
-		onPageChange               : ()=>{},
-		...props
-	};
+	componentDidUpdate : function(prevProps) {
+		if(prevProps.text !== this.props.text) {
+			let pages;
+			if(this.props.renderer == 'legacy') {
+				pages = this.props.text.split('\\page');
+			} else {
+				pages = this.props.text.split(/^\\page$/gm);
+			}
+			this.setState({
+				pages  : pages,
+				usePPR : pages.length >= PPR_THRESHOLD
+			});
+		}
+	},
 
-	const [state, setState] = useState({
-		isMounted  : false,
-		visibility : 'hidden',
-		zoom       : 100
-	});
+	updateSize : function() {
+		this.setState({
+			height : this.refs.main.parentNode.clientHeight,
+		});
+	},
 
-	const mainRef  = useRef(null);
+	handleScroll : function(e){
+		const target = e.target;
+		this.setState((prevState)=>({
+			viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * prevState.pages.length)
+		}));
+	},
 
-	if(props.renderer == 'legacy') {
-		rawPages = props.text.split('\\page');
-	} else {
-		rawPages = props.text.split(/^\\page$/gm);
-	}
+	shouldRender : function(pageText, index){
+		if(!this.state.isMounted) return false;
 
-	const updateCurrentPage = useCallback(_.throttle((e)=>{
-		const { scrollTop, clientHeight, scrollHeight } = e.target;
-		const totalScrollableHeight = scrollHeight - clientHeight;
-		const currentPageNumber = Math.max(Math.ceil((scrollTop / totalScrollableHeight) * rawPages.length), 1);
+		const viewIndex = this.state.viewablePageNumber;
+		if(index == viewIndex - 3) return true;
+		if(index == viewIndex - 2) return true;
+		if(index == viewIndex - 1) return true;
+		if(index == viewIndex)     return true;
+		if(index == viewIndex + 1) return true;
+		if(index == viewIndex + 2) return true;
+		if(index == viewIndex + 3) return true;
 
-		props.onPageChange(currentPageNumber);
-	}, 200), []);
-
-	const isInView = (index)=>{
-		if(!state.isMounted)
-			return false;
-
-		if(index == props.currentEditorCursorPageNum - 1)	//Already rendered before this step
-			return false;
-
-		if(Math.abs(index - props.currentBrewRendererPageNum - 1) <= 3)
-			return true;
+		//Check for style tages
+		if(pageText.indexOf('<style>') !== -1) return true;
 
 		return false;
-	};
+	},
 
-	const renderDummyPage = (index)=>{
+	renderPageInfo : function(){
+		return <div className='pageInfo' ref='main'>
+			{this.state.viewablePageNumber + 1} / {this.state.pages.length}
+		</div>;
+	},
+
+	renderPPRmsg : function(){
+		if(!this.state.usePPR) return;
+
+		return <div className='ppr_msg'>
+			Partial Page Renderer enabled, because your brew is so large. May effect rendering.
+		</div>;
+	},
+
+	renderDummyPage : function(index){
 		return <div className='phb page' id={`p${index + 1}`} key={index}>
 			<i className='fas fa-spinner fa-spin' />
 		</div>;
-	};
+	},
 
-	const renderStyle = ()=>{
-		const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig);
-		const themeStyles = props.themeBundle?.joinedStyles ?? '<style>@import url("/themes/V3/Blank/style.css");</style>';
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `${themeStyles} \n\n <style> ${cleanStyle} </style>` }} />;
-	};
+	renderStyle : function() {
+		if(!this.props.style) return;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />;
+	},
 
-	const renderPage = (pageText, index)=>{
-		if(props.renderer == 'legacy') {
-			const html = MarkdownLegacy.render(pageText);
-			return <BrewPage className='page phb' index={index} key={index} contents={html} />;
-		} else {
+	renderPage : function(pageText, index){
+		if(this.props.renderer == 'legacy')
+			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
+		else {
 			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
-			const html = Markdown.render(pageText, index);
-			return <BrewPage className='page' index={index} key={index} contents={html} />;
+			return (
+				<div className='page' id={`p${index + 1}`} key={index} >
+					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
+				</div>
+			);
 		}
-	};
+	},
 
-	const renderPages = ()=>{
-		if(props.errors && props.errors.length)
-			return renderedPages;
-
-		if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes
-			renderedPages.length = 0;
-
-		// Render currently-edited page first so cross-page effects (variables, links) can propagate out first
-		renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
-
-		_.forEach(rawPages, (page, index)=>{
-			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
-				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
+	renderPages : function(){
+		if(this.state.usePPR){
+			return _.map(this.state.pages, (page, index)=>{
+				if(this.shouldRender(page, index) && typeof window !== 'undefined'){
+					return this.renderPage(page, index);
+				} else {
+					return this.renderDummyPage(index);
+				}
+			});
+		}
+		if(this.props.errors && this.props.errors.length) return this.lastRender;
+		this.lastRender = _.map(this.state.pages, (page, index)=>{
+			if(typeof window !== 'undefined') {
+				return this.renderPage(page, index);
+			} else {
+				return this.renderDummyPage(index);
 			}
 		});
-		return renderedPages;
-	};
+		return this.lastRender;
+	},
 
-	const handleControlKeys = (e)=>{
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const P_KEY = 80;
-		if(e.keyCode == P_KEY && props.allowPrint) printCurrentBrew();
-		if(e.keyCode == P_KEY) {
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	};
-
-	const frameDidMount = ()=>{	//This triggers when iFrame finishes internal "componentDidMount"
+	frameDidMount : function(){	//This triggers when iFrame finishes internal "componentDidMount"
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
-			renderPages(); //Make sure page is renderable before showing
-			setState((prevState)=>({
-				...prevState,
+			this.updateSize();
+			window.addEventListener('resize', this.updateSize);
+			this.renderPages(); //Make sure page is renderable before showing
+			this.setState({
 				isMounted  : true,
 				visibility : 'visible'
-			}));
+			});
 		}, 100);
-	};
+	},
 
-	const emitClick = ()=>{ // Allow clicks inside iFrame to interact with dropdowns, etc. from outside
-		if(!window || !document) return;
-		document.dispatchEvent(new MouseEvent('click'));
-	};
+	render : function(){
+		//render in iFrame so broken code doesn't crash the site.
+		//Also render dummy page while iframe is mounting.
 
-	//Toolbar settings:
-	const handleZoom = (newZoom)=>{
-		setState((prevState)=>({
-			...prevState,
-			zoom : newZoom
-		}));
-	};
-
-	const styleObject = {};
-
-	if(global.config.deployment) {
-		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='white' font-size='20'>${global.config.deployment}</text></svg>")`;
-	}
-
-	return (
-		<>
-			{/*render dummy page while iFrame is mounting.*/}
-			{!state.isMounted
-				? <div className='brewRenderer' onScroll={updateCurrentPage}>
-					<div className='pages'>
-						{renderDummyPage(1)}
+		return (
+			<React.Fragment>
+				{!this.state.isMounted
+					? <div className='brewRenderer' onScroll={this.handleScroll}>
+						<div className='pages' ref='pages'>
+							{this.renderDummyPage(1)}
+						</div>
 					</div>
-				</div>
-				: null}
+	        : null}
 
-			<ErrorBar errors={props.errors} />
-			<div className='popups' ref={mainRef}>
-				<RenderWarnings />
-				<NotificationPopup />
-			</div>
+				<Frame initialContent={this.state.initialContent}
+					style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
+					contentDidMount={this.frameDidMount}>
+					<div className={'brewRenderer'}
+						onScroll={this.handleScroll}
+						style={{ height: this.state.height }}>
 
-			<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum}  totalPages={rawPages.length}/>
-
-			{/*render in iFrame so broken code doesn't crash the site.*/}
-			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
-				style={{ width: '100%', height: '100%', visibility: state.visibility }}
-				contentDidMount={frameDidMount}
-				onClick={()=>{emitClick();}}
-			>
-				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
-					onScroll={updateCurrentPage}
-					onKeyDown={handleControlKeys}
-					tabIndex={-1}
-					style={ styleObject }>
-
-					{/* Apply CSS from Style tab and render pages from Markdown tab */}
-					{state.isMounted
-						&&
-						<>
-							{renderStyle()}
-							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%` }}>
-								{renderPages()}
-							</div>
-						</>
-					}
-				</div>
-			</Frame>
-		</>
-	);
-}, arePropsEqual);
-
-//Only re-render brewRenderer if arePropsEqual == true
-function arePropsEqual(oldProps, newProps) {
-	return (
-		oldProps?.text?.length  === newProps?.text?.length &&
-		oldProps?.style?.length === newProps?.style?.length &&
-		oldProps?.renderer      === newProps?.renderer &&
-		oldProps?.theme         === newProps?.theme &&
-		oldProps?.errors        === newProps?.errors &&
-		oldProps?.themeBundle   === newProps?.themeBundle &&
-		oldProps?.lang          === newProps?.lang
-	);
-}
+						<ErrorBar errors={this.props.errors} />
+						<div className='popups'>
+							<RenderWarnings />
+							<NotificationPopup />
+						</div>
+						<link href={`${this.props.renderer == 'legacy' ? '/themes/5ePhbLegacy.style.css' : '/themes/5ePhb.style.css'}`} rel='stylesheet'/>
+						{/* Apply CSS from Style tab and render pages from Markdown tab */}
+						{this.state.isMounted
+							&&
+							<>
+								{this.renderStyle()}
+								<div className='pages' ref='pages'>
+									{this.renderPages()}
+								</div>
+							</>
+						}
+					</div>
+				</Frame>
+				{this.renderPageInfo()}
+				{this.renderPPRmsg()}
+			</React.Fragment>
+		);
+	}
+});
 
 module.exports = BrewRenderer;

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,50 +1,40 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
 
-.brewRenderer {
-	overflow-y    : scroll;
-	will-change   : transform;
-	padding-top   : 30px;
-	height        : 100vh;
-	&.deployment {
-		background-color: darkred;
-	}
-	:where(.pages) {
+.brewRenderer{
+	will-change : transform;
+	overflow-y  : scroll;
+	.pages{
 		margin : 30px 0px;
-		& > :where(.page) {
-			width         : 215.9mm;
-			height        : 279.4mm;
+		&>.page{
 			margin-right  : auto;
 			margin-bottom : 30px;
 			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000000;
+			box-shadow    : 1px 4px 14px #000;
 		}
 	}
-	&::-webkit-scrollbar {
-		width : 20px;
-		&:horizontal {
-			width  : auto;
-			height : 20px;
-		}
-		&-thumb {
-			background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
-			&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
-		}
-		&-corner { visibility : hidden; }
-	}
 }
-
-.pane { position : relative; }
-
-@media print {
-	.toolBar { display : none; }
-	.brewRenderer {
-		height      : 100%;
-		padding-top : unset;
-		overflow-y  : unset;
-		.pages {
-			margin : 0px;
-			zoom: 100% !important;
-			& > .page { box-shadow : unset; }
-		}
-	}
-}
+.pane{
+	position : relative;
+}
+.pageInfo{
+	position         : absolute;
+	right            : 17px;
+	bottom           : 0;
+	z-index          : 1000;
+	padding          : 8px 10px;
+	background-color : #333;
+	font-size        : 10px;
+	font-weight      : 800;
+	color            : white;
+}
+.ppr_msg{
+	position         : absolute;
+	left             : 0px;
+	bottom           : 0;
+	z-index          : 1000;
+	padding          : 8px 10px;
+	background-color : #333;
+	font-size        : 10px;
+	font-weight      : 800;
+	color            : white;
+}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -2,6 +2,7 @@ require('./errorBar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
+const cx    = require('classnames');
 
 const ErrorBar = createClass({
 	displayName     : 'ErrorBar',

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,46 +1,92 @@
 require('./notificationPopup.less');
 const React = require('react');
+const createClass = require('create-react-class');
 const _     = require('lodash');
+const cx    = require('classnames');	//Unused variable
 
-import Dialog from '../../../components/dialog.jsx';
+const DISMISS_KEY = 'dismiss_notification09-9-21';
 
-const DISMISS_KEY = 'dismiss_notification01-10-24';
-const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
-
-const NotificationPopup = ()=>{
-	return <Dialog className='notificationPopup' dismissKey={DISMISS_KEY} closeText={DISMISS_BUTTON} >
-		<div className='header'>
-			<i className='fas fa-info-circle info'></i>
-			<h3>Notice</h3>
-			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
-		</div>
-		<ul>
-			<li key='Vault'>
-				<em>Search brews with our new page!</em><br />
-				We have been working very hard in making this possible, now you can share your work and look at it in the new <a href='/vault'>Vault</a> page!
-				All PUBLISHED brews will be available to anyone searching there, by title or author, and filtering by renderer.
-
-				More features will be coming.
-			</li>
-
-			<li key='googleDriveFolder'>
-				<em>Don't delete your Homebrewery folder on Google Drive!</em> <br />
-				We have had several reports of users losing their brews, not realizing
-				that they had deleted the files on their Google Drive. If you have a Homebrewery folder
-				on your Google Drive with *.txt files inside, <em>do not delete it</em>!
-				We cannot help you recover files that you have deleted from your own
-				Google Drive.
-			</li>
-
-			<li key='faq'>
+const NotificationPopup = createClass({
+	displayName     : 'NotificationPopup',
+	getInitialState : function() {
+		return {
+			notifications : {}
+		};
+	},
+	componentDidMount : function() {
+		this.checkNotifications();
+		window.addEventListener('resize', this.checkNotifications);
+	},
+	componentWillUnmount : function() {
+		window.removeEventListener('resize', this.checkNotifications);
+	},
+	notifications : {
+		psa : function(){
+			return <li key='psa'>
+				<em>V3.0.0 Released!</em> <br />
+				After a long and bumpy road, we decided it was high time we finally release version 3 of the homebrewery into the wild. You can check out a
+				brief overview and see how to opt-in to the new features here:&nbsp;
+				<a target='_blank' href='https://homebrewery.naturalcrit.com/v3_preview'>V3 Welcome Page</a> and&nbsp;
+				<a target='_blank' href='https://homebrewery.naturalcrit.com/changelog'>the Changelog</a>.
+				<br /><br />
+				<em>BE WARNED:</em> As we continue to develop V3, expect small tweaks in the styling, fonts, and snippets; your brews may look slightly
+				different from day-to-day. All of your old documents will continue to work as normal; we are not touching them. If you don't want to deal
+				with the possibility of slight formatting changes, you may choose to stick with the Legacy renderer on any of your brews for as long as you like.
+				<br /><br />
+				With this in mind, if you still wish to try out V3, you can opt-in any of your brews to the the V3 renderer.
+				This will likely break much of your formatting as a lot of the Markdown code has been updated, and starting from scratch may be cleaner.
+				(Don't worry, you can always change the renderer back to Legacy	for any brew at any time).
+			</li>;
+		},
+		refreshGoogle : function (){
+			return <li key='refreshGoogle'>
+				<em>Refresh your Google Drive Credentials!</em> <br />
+				Currently a lot of people are striking issues with their Google credentials expiring, which happens one year after the last sign in via
+				Google. This can cause errors when trying to save your brews. If this happens, simply visit the&nbsp;
+				<a target='_blank' href='https://www.naturalcrit.com/login'>
+				logout page
+				</a>
+				, sign out, and then sign	back in "with Google" to refresh your credentials. See&nbsp;
+				<a target='_blank' href='https://github.com/naturalcrit/homebrewery/discussions/1580'>
+					this discussion on Github
+				</a> for more details.
+			</li>;
+		},
+		faq : function(){
+			return <li key='faq'>
 				<em>Protect your work! </em> <br />
 				If you opt not to use your Google Drive, keep in mind that we do not save a history of your projects. Please make frequent backups of your brews!&nbsp;
 				<a target='_blank' href='https://www.reddit.com/r/homebrewery/comments/adh6lh/faqs_psas_announcements/'>
 					See the FAQ
 				</a> to learn how to avoid losing your work!
-			</li>
-		</ul>
-	</Dialog>;
-};
+			</li>;
+		},
+	},
+	checkNotifications : function(){
+		const hideDismiss = localStorage.getItem(DISMISS_KEY);
+		if(hideDismiss) return this.setState({ notifications: {} });
+
+		this.setState({
+			notifications : _.mapValues(this.notifications, (fn)=>{ return fn(); })	//Convert notification functions into their return text value
+		});
+	},
+	dismiss : function(){
+		localStorage.setItem(DISMISS_KEY, true);
+		this.checkNotifications();
+	},
+	render : function(){
+		if(_.isEmpty(this.state.notifications)) return null;
+
+		return <div className='notificationPopup'>
+			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
+			<i className='fas fa-info-circle info' />
+			<div className='header'>
+				<h3>Notice</h3>
+				<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
+			</div>
+			<ul>{_.values(this.state.notifications)}</ul>
+		</div>;
+	}
+});
 
 module.exports = NotificationPopup;

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,61 +1,64 @@
-.popups {
+.popups{
 	position         : fixed;
-	top              : calc(@navbarHeight + @viewerToolsHeight);
-	right            : 24px;
+	top              : @navbarHeight;
+	right            : 15px;
 	z-index          : 10001;
 	width            : 450px;
-	margin-top       : 5px;
 }
 
-.notificationPopup {
+.notificationPopup{
 	position         : relative;
+	display          : inline-block;
 	width            : 100%;
 	padding          : 15px;
 	padding-bottom   : 10px;
 	padding-left     : 25px;
-	color            : white;
 	background-color : @blue;
-	border           : none;
-	&[open] { display : inline-block; }
-	a {
+	color            : white;
+	a{
+		color       : #e0e5c1;
 		font-weight : 800;
-		color       : #E0E5C1;
 	}
-	i.info {
+	i.info{
 		position  : absolute;
 		top       : 12px;
 		left      : 12px;
-		font-size : 2.5em;
 		opacity   : 0.8;
+		font-size : 2.5em;
 	}
-	button.dismiss {
-		position         : absolute;
-		top              : 10px;
-		right            : 10px;
-		cursor           : pointer;
-		background-color : transparent;
-		opacity          : 0.6;
-		&:hover { opacity : 1; }
+	i.dismiss{
+		position : absolute;
+		top      : 10px;
+		right    : 10px;
+		cursor   : pointer;
+		opacity  : 0.6;
+		&:hover{
+			opacity : 1;
+		}
 	}
-	.header { padding-left : 50px; }
-	small {
-		font-size : 0.6em;
+	.header {
+		padding-left : 50px;
+	}
+	small{
 		opacity   : 0.7;
+		font-size : 0.6em;
 	}
-	h3 {
+	h3{
 		font-size   : 1.1em;
 		font-weight : 800;
 	}
-	ul {
+	ul{
 		margin-top          : 15px;
 		font-size           : 0.8em;
 		list-style-position : outside;
 		list-style-type     : disc;
-		li {
-			margin-top  : 1.4em;
+		li{
 			font-size   : 0.8em;
 			line-height : 1.4em;
-			em { font-weight : 800; }
+			margin-top  : 1.4em;
+			em{
+				font-weight : 800;
+			}
 		}
 	}
 }

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -1,164 +0,0 @@
-require('./toolBar.less');
-const React = require('react');
-const { useState, useEffect } = React;
-const _ = require('lodash');
-
-
-const MAX_ZOOM = 300;
-const MIN_ZOOM = 10;
-
-const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
-
-	const [zoomLevel, setZoomLevel] = useState(100);
-	const [pageNum, setPageNum]     = useState(currentPage);
-	const [toolsVisible, setToolsVisible] = useState(true);
-
-	useEffect(()=>{
-		onZoomChange(zoomLevel);
-	}, [zoomLevel]);
-
-	useEffect(()=>{
-		setPageNum(currentPage);
-	}, [currentPage]);
-
-	const handleZoomButton = (zoom)=>{
-		setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
-	};
-
-	const handlePageInput = (pageInput)=>{
-		if(/[0-9]/.test(pageInput))
-			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
-	};
-
-	const scrollToPage = (pageNumber)=>{
-		pageNumber = _.clamp(pageNumber, 1, totalPages);
-		const iframe = document.getElementById('BrewRenderer');
-		const brewRenderer = iframe?.contentWindow?.document.querySelector('.brewRenderer');
-		const page = brewRenderer?.querySelector(`#p${pageNumber}`);
-		page?.scrollIntoView({ block: 'start' });
-		setPageNum(pageNumber);
-	};
-
-
-	const calculateChange = (mode)=>{
-		const iframe = document.getElementById('BrewRenderer');
-		const iframeWidth = iframe.getBoundingClientRect().width;
-		const iframeHeight = iframe.getBoundingClientRect().height;
-		const pages = iframe.contentWindow.document.getElementsByClassName('page');
-
-		let desiredZoom = 0;
-
-		if(mode == 'fill'){
-			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
-			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
-
-			desiredZoom = (iframeWidth / widestPage) * 100;
-
-		} else if(mode == 'fit'){
-			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
-			const minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
-
-			desiredZoom = minDimRatio * 100;
-		}
-
-		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")
-
-		const deltaZoom = (desiredZoom - zoomLevel) - margin;
-		return deltaZoom;
-	};
-
-	return (
-		<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
-			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
-			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
-			<div className='group'>
-				<button
-					id='fill-width'
-					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))}
-				>
-					<i className='fac fit-width' />
-				</button>
-				<button
-					id='zoom-to-fit'
-					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))}
-				>
-					<i className='fac zoom-to-fit' />
-				</button>
-				<button
-					id='zoom-out'
-					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel - 20)}
-					disabled={zoomLevel <= MIN_ZOOM}
-				>
-					<i className='fas fa-magnifying-glass-minus' />
-				</button>
-				<input
-					id='zoom-slider'
-					className='range-input tool'
-					type='range'
-					name='zoom'
-					list='zoomLevels'
-					min={MIN_ZOOM}
-					max={MAX_ZOOM}
-					step='1'
-					value={zoomLevel}
-					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
-				/>
-				<datalist id='zoomLevels'>
-					<option value='100' />
-				</datalist>
-
-				<button
-					id='zoom-in'
-					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel + 20)}
-					disabled={zoomLevel >= MAX_ZOOM}
-				>
-					<i className='fas fa-magnifying-glass-plus' />
-				</button>
-			</div>
-
-			{/*v=====----------------------< Page Controls >---------------------=====v*/}
-			<div className='group'>
-				<button
-					id='previous-page'
-					className='previousPage tool'
-					onClick={()=>scrollToPage(pageNum - 1)}
-					disabled={pageNum <= 1}
-				>
-					<i className='fas fa-arrow-left'></i>
-				</button>
-
-				<div className='tool'>
-					<input
-						id='page-input'
-						className='text-input'
-						type='text'
-						name='page'
-						inputMode='numeric'
-						pattern='[0-9]'
-						value={pageNum}
-						onClick={(e)=>e.target.select()}
-						onChange={(e)=>handlePageInput(e.target.value)}
-						onBlur={()=>scrollToPage(pageNum)}
-						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
-					/>
-					<span id='page-count'>/ {totalPages}</span>
-				</div>
-
-				<button
-					id='next-page'
-					className='tool'
-					onClick={()=>scrollToPage(pageNum + 1)}
-					disabled={pageNum >= totalPages}
-				>
-					<i className='fas fa-arrow-right'></i>
-				</button>
-			</div>
-		</div>
-	);
-};
-
-module.exports = ToolBar;

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -1,128 +0,0 @@
-@import (less) './client/icons/customIcons.less';
-
-.toolBar {
-	position         : absolute;
-	z-index          : 1;
-	box-sizing       : border-box;
-	display          : flex;
-	flex-wrap        : wrap;
-	gap              : 8px 30px;
-	align-items      : center;
-	justify-content  : center;
-	width            : 100%;
-	height           : auto;
-	padding          : 2px 0;
-	font-family      : 'Open Sans', sans-serif;
-	color            : #CCCCCC;
-	background-color : #555555;
-	& > *:not(.toggleButton) {
-		opacity: 1;
-		transition: all .2s ease;
-	}
-
-	.group {
-		box-sizing       : border-box;
-		display          : flex;
-		gap              : 0 3px;
-		align-items      : center;
-		justify-content  : center;
-		height           : 28px;
-	}
-
-	.tool {
-		display     : flex;
-		align-items : center;
-	}
-
-	input {
-		position       : relative;
-		height         : 1.5em;
-		padding        : 2px 5px;
-		font-family    : 'Open Sans', sans-serif;
-		color          : #000000;
-		background     : #EEEEEE;
-		border         : 1px solid gray;
-		&:focus { outline : 1px solid #D3D3D3; }
-
-		// `.range-input` if generic to all range inputs, or `#zoom-slider` if only for zoom slider
-		&.range-input {
-			padding      : 2px 0;
-			color        : #D3D3D3;
-			accent-color : #D3D3D3;
-  
-			&::-webkit-slider-thumb, &::-moz-slider-thumb { 
-				width            : 5px;
-				height           : 5px;
-				cursor           : pointer;
-				outline          : none;
-			}
-
-			&:hover::after {
-				position         : absolute;
-				bottom           : -30px;
-				left             : 50%;
-				z-index          : 1;
-				display          : grid;
-				place-items      : center;
-				width            : 4ch;
-				height           : 1.2lh;
-				pointer-events   : none;
-				content          : attr(value);
-				background-color : #555555;
-				border           : 1px solid #A1A1A1;
-				transform        : translate(-50%, 50%);
-			}
-		}
-
-		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
-		&#page-input {
-			width        : 4ch;
-			margin-right : 1ch;
-			text-align   : center;
-		}
-	}
-
-	button {
-		box-sizing       : content-box;
-		display          : flex;
-		align-items      : center;
-		justify-content  : center;
-		width            : auto;
-		min-width        : 46px;
-		height           : 100%;
-		padding          : 0 0px;
-		font-weight      : unset;
-		color            : inherit;
-		background-color : unset;
-		&:hover { background-color : #444444; }
-		&:focus { outline : 1px solid #D3D3D3; }
-		&:disabled {
-			color            : #777777;
-			background-color : unset !important;
-		}
-		i {
-			font-size:1.2em;
-		}
-	}
-
-	&.hidden {
-		width: 32px;
-		transition: all .3s ease;
-		flex-wrap:nowrap;
-		overflow: hidden;
-		background-color: unset;
-		opacity: .5;
-		& > *:not(.toggleButton) {
-			opacity: 0;
-			transition: all .2s ease;
-		}
-	}
-}
-
-button.toggleButton {
-	z-index : 5;
-	position:absolute;
-	left: 0;
-	width: 32px;
-	min-width: unset;
-}

client/homebrew/editor/editor.jsx

@@ -1,17 +1,15 @@
-/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./editor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
+const cx = require('classnames');
 const dedent = require('dedent-tabs').default;
-const Markdown = require('../../../shared/naturalcrit/markdown.js');
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
 const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
-const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
-
 const SNIPPETBAR_HEIGHT = 25;
 const DEFAULT_STYLE_TEXT = dedent`
 				/*=======---  Example CSS styling  ---=======*/
@@ -21,7 +19,11 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
-let isJumping = false;
+const splice = function(str, index, inject){
+	return str.slice(0, index) + inject + str.slice(index);
+};
+
+
 
 const Editor = createClass({
 	displayName     : 'Editor',
@@ -35,143 +37,80 @@ const Editor = createClass({
 			onTextChange  : ()=>{},
 			onStyleChange : ()=>{},
 			onMetaChange  : ()=>{},
-			reportError   : ()=>{},
 
-			onCursorPageChange : ()=>{},
-			onViewPageChange   : ()=>{},
-
-			editorTheme : 'default',
-			renderer    : 'legacy',
-
-			currentEditorCursorPageNum : 1,
-			currentEditorViewPageNum   : 1,
-			currentBrewRendererPageNum : 1,
+			renderer : 'legacy'
 		};
 	},
 	getInitialState : function() {
 		return {
-			editorTheme : this.props.editorTheme,
-			view        : 'text' //'text', 'style', 'meta'
+			view : 'text' //'text', 'style', 'meta'
 		};
 	},
 
-	editor     : React.createRef(null),
-	codeEditor : React.createRef(null),
-
 	isText  : function() {return this.state.view == 'text';},
 	isStyle : function() {return this.state.view == 'style';},
 	isMeta  : function() {return this.state.view == 'meta';},
 
 	componentDidMount : function() {
-
 		this.updateEditorSize();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
-		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
-		document.addEventListener('keydown', this.handleControlKeys);
-
-		this.codeEditor.current.codeMirror.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
-		this.codeEditor.current.codeMirror.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
-
-		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
-		if(editorTheme) {
-			this.setState({
-				editorTheme : editorTheme
-			});
-		}
 	},
 
 	componentWillUnmount : function() {
 		window.removeEventListener('resize', this.updateEditorSize);
 	},
 
-	componentDidUpdate : function(prevProps, prevState, snapshot) {
-
+	componentDidUpdate : function() {
 		this.highlightCustomMarkdown();
-		if(prevProps.moveBrew !== this.props.moveBrew)
-			this.brewJump();
-
-		if(prevProps.moveSource !== this.props.moveSource)
-			this.sourceJump();
-
-		if(this.props.liveScroll) {
-			if(prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) {
-				this.sourceJump(this.props.currentBrewRendererPageNum, false);
-			} else if(prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) {
-				this.brewJump(this.props.currentEditorViewPageNum, false);
-			} else if(prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) {
-				this.brewJump(this.props.currentEditorCursorPageNum, false);
-			}
-		}
-	},
-
-	handleControlKeys : function(e){
-		if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
-		const LEFTARROW_KEY = 37;
-		const RIGHTARROW_KEY = 39;
-		if(e.keyCode == RIGHTARROW_KEY) this.brewJump();
-		if(e.keyCode == LEFTARROW_KEY) this.sourceJump();
-		if(e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) {
-			e.stopPropagation();
-			e.preventDefault();
-		}
 	},
 
 	updateEditorSize : function() {
-		if(this.codeEditor.current) {
-			let paneHeight = this.editor.current.parentNode.clientHeight;
-			paneHeight -= SNIPPETBAR_HEIGHT;
-			this.codeEditor.current.codeMirror.setSize(null, paneHeight);
+		if(this.refs.codeEditor) {
+			let paneHeight = this.refs.main.parentNode.clientHeight;
+			paneHeight -= SNIPPETBAR_HEIGHT + 1;
+			this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
 		}
 	},
 
-	updateCurrentCursorPage : function(cursor) {
-		const lines = this.props.brew.text.split('\n').slice(0, cursor.line + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\page/;
-		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
-		this.props.onCursorPageChange(currentPage);
-	},
-
-	updateCurrentViewPage : function(topScrollLine) {
-		const lines = this.props.brew.text.split('\n').slice(0, topScrollLine + 1);
-		const pageRegex = this.props.brew.renderer == 'V3' ? /^\\page$/ : /\\page/;
-		const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
-		this.props.onViewPageChange(currentPage);
-	},
-
 	handleInject : function(injectText){
-		this.codeEditor.current?.injectText(injectText, false);
+		let text;
+		if(this.isText())  text = this.props.brew.text;
+		if(this.isStyle()) text = this.props.brew.style ?? DEFAULT_STYLE_TEXT;
+
+		const lines = text.split('\n');
+		const cursorPos = this.refs.codeEditor.getCursorPosition();
+		lines[cursorPos.line] = splice(lines[cursorPos.line], cursorPos.ch, injectText);
+
+		const injectLines = injectText.split('\n');
+		this.refs.codeEditor.setCursorPosition(cursorPos.line + injectLines.length, cursorPos.ch  + injectLines[injectLines.length - 1].length);
+
+		if(this.isText())  this.props.onTextChange(lines.join('\n'));
+		if(this.isStyle()) this.props.onStyleChange(lines.join('\n'));
 	},
 
 	handleViewChange : function(newView){
-		this.props.setMoveArrows(newView === 'text');
 		this.setState({
 			view : newView
-		}, ()=>{
-			this.codeEditor.current?.codeMirror.focus();
-			this.updateEditorSize();
-		});	//TODO: not sure if updateeditorsize needed
+		}, this.updateEditorSize);	//TODO: not sure if updateeditorsize needed
+	},
+
+	getCurrentPage : function(){
+		const lines = this.props.brew.text.split('\n').slice(0, this.cursorPosition.line + 1);
+		return _.reduce(lines, (r, line)=>{
+			if(line.indexOf('\\page') !== -1) r++;
+			return r;
+		}, 1);
 	},
 
 	highlightCustomMarkdown : function(){
-		if(!this.codeEditor.current) return;
+		if(!this.refs.codeEditor) return;
 		if(this.state.view === 'text')  {
-			const codeMirror = this.codeEditor.current.codeMirror;
+			const codeMirror = this.refs.codeEditor.codeMirror;
 
 			codeMirror.operation(()=>{ // Batch CodeMirror styling
-
-				const foldLines = [];
-
 				//reset custom text styles
-				const customHighlights = codeMirror.getAllMarks().filter((mark)=>{
-					// Record details of folded sections
-					if(mark.__isFold) {
-						const fold = mark.find();
-						foldLines.push({ from: fold.from?.line, to: fold.to?.line });
-					}
-					return !mark.__isFold;
-				}); //Don't undo code folding
-
+				const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
 				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
 
 				let editorPageCount = 2; // start page count from page 2
@@ -181,12 +120,6 @@ const Editor = createClass({
 					//reset custom line styles
 					codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
 					codeMirror.removeLineClass(lineNumber, 'text');
-					codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
-
-					// Don't process lines inside folded text
-					// If the current lineNumber is inside any folded marks, skip line styling
-					if(foldLines.some((fold)=>lineNumber >= fold.from && lineNumber <= fold.to))
-						return;
 
 					// Styling for \page breaks
 					if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
@@ -209,53 +142,9 @@ const Editor = createClass({
 							codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
 						}
 
-						// definition lists
-						if(line.includes('::')){
-							if(/^:*$/.test(line) == true){ return; };
-							const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd;  // the `d` flag, for match indices, throws an ESLint error.
-							let match;
-							while ((match = regex.exec(line)) != null){
-								codeMirror.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
-								codeMirror.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
-								codeMirror.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
-								const ddIndex = match.indices[2][0];
-								const colons = /::/g;
-								const colonMatches = colons.exec(match[2]);
-								if(colonMatches !== null){
-									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
-								}
-							}
-						}
-
-						// Subscript & Superscript
-						if(line.includes('^')) {
-							let startIndex = line.indexOf('^');
-							const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy;
-							const subRegex   = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy;
-
-							while (startIndex >= 0) {
-								superRegex.lastIndex = subRegex.lastIndex = startIndex;
-								let isSuper = false;
-								const match = subRegex.exec(line) || superRegex.exec(line);
-								if(match) {
-									isSuper = !subRegex.lastIndex;
-									codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
-								}
-								startIndex = line.indexOf('^', Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex));
-							}
-						}
-
-						// Highlight injectors {style}
-						if(line.includes('{') && line.includes('}')){
-							const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
-							let match;
-							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
-							}
-						}
 						// Highlight inline spans {{content}}
 						if(line.includes('{{') && line.includes('}}')){
-							const regex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g;
+							const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
 							let match;
 							let blockCount = 0;
 							while ((match = regex.exec(line)) != null) {
@@ -274,145 +163,25 @@ const Editor = createClass({
 							// Highlight block divs {{\n Content \n}}
 							let endCh = line.length+1;
 
-							const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
+							const match = line.match(/^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/);
 							if(match)
 								endCh = match.index+match[0].length;
 							codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
 						}
-
-						// Emojis
-						if(line.match(/:[^\s:]+:/g)) {
-							let startIndex = line.indexOf(':');
-							const emojiRegex = /:[^\s:]+:/gy;
-
-							while (startIndex >= 0) {
-								emojiRegex.lastIndex = startIndex;
-								const match = emojiRegex.exec(line);
-								if(match) {
-									let tokens = Markdown.marked.lexer(match[0]);
-									tokens = tokens[0].tokens.filter((t)=>t.type == 'emoji');
-									if(!tokens.length)
-										return;
-
-									const startPos = { line: lineNumber, ch: match.index };
-									const endPos   = { line: lineNumber, ch: match.index + match[0].length };
-
-									// Iterate over conflicting marks and clear them
-									const marks = codeMirror.findMarks(startPos, endPos);
-									marks.forEach(function(marker) {
-										if(!marker.__isFold) marker.clear();
-									});
-									codeMirror.markText(startPos, endPos, { className: 'emoji' });
-								}
-								startIndex = line.indexOf(':', Math.max(startIndex + 1, emojiRegex.lastIndex));
-							}
-						}
 					}
 				});
 			});
 		}
 	},
 
-	brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){
-		if(!window || isJumping)
-			return;
-
-		// Get current brewRenderer scroll position and calculate target position
-		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
-		const currentPos = brewRenderer.scrollTop;
-		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
-
-		const checkIfScrollComplete = ()=>{
-			let scrollingTimeout;
-			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
-			scrollingTimeout = setTimeout(()=>{
-				isJumping = false;
-				brewRenderer.removeEventListener('scroll', checkIfScrollComplete);
-			}, 150);	// If 150 ms pass without a brewRenderer scroll event, assume scrolling is done
-		};
-
-		isJumping = true;
-		checkIfScrollComplete();
-		brewRenderer.addEventListener('scroll', checkIfScrollComplete);
-
-		if(smooth) {
-			const bouncePos   = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling
-			const bounceDelay = 100;
-			const scrollDelay = 500;
-
-			if(!this.throttleBrewMove) {
-				this.throttleBrewMove = _.throttle((currentPos, bouncePos, targetPos)=>{
-					brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: 'smooth' });
-					setTimeout(()=>{
-						brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
-					}, bounceDelay);
-				}, scrollDelay, { leading: true, trailing: false });
-			};
-			this.throttleBrewMove(currentPos, bouncePos, targetPos);
-		} else {
-			brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'instant', block: 'start' });
-		}
-	},
-
-	sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){
-		if(!this.isText() || isJumping)
-			return;
-
-		const textSplit  = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
-		const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
-		const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
-
-		let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
-		let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
-
-		const checkIfScrollComplete = ()=>{
-			let scrollingTimeout;
-			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
-			scrollingTimeout = setTimeout(()=>{
-				isJumping = false;
-				this.codeEditor.current.codeMirror.off('scroll', checkIfScrollComplete);
-			}, 150); // If 150 ms pass without a scroll event, assume scrolling is done
-		};
-
-		isJumping = true;
-		checkIfScrollComplete();
-		this.codeEditor.current.codeMirror.on('scroll', checkIfScrollComplete);
-
-		if(smooth) {
-			//Scroll 1/10 of the way every 10ms until 1px off.
-			const incrementalScroll = setInterval(()=>{
-				currentY += (targetY - currentY) / 10;
-				this.codeEditor.current.codeMirror.scrollTo(null, currentY);
-
-				// Update target: target height is not accurate until within +-10 lines of the visible window
-				if(Math.abs(targetY - currentY > 100))
-					targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
-
-				// End when close enough
-				if(Math.abs(targetY - currentY) < 1) {
-					this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
-					this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-					this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
-					clearInterval(incrementalScroll);
-				}
-			}, 10);
-		} else {
-			this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
-			this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-			this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
-		}
+	brewJump : function(){
+		const currentPage = this.getCurrentPage();
+		window.location.hash = `p${currentPage}`;
 	},
 
 	//Called when there are changes to the editor's dimensions
 	update : function(){
-		this.codeEditor.current?.updateSize();
-	},
-
-	updateEditorTheme : function(newTheme){
-		window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
-		this.setState({
-			editorTheme : newTheme
-		});
+		this.refs.codeEditor?.updateSize();
 	},
 
 	//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
@@ -424,25 +193,23 @@ const Editor = createClass({
 		if(this.isText()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref={this.codeEditor}
+					ref='codeEditor'
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.text}
 					onChange={this.props.onTextChange}
-					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent} />
 			</>;
 		}
 		if(this.isStyle()){
 			return <>
 				<CodeEditor key='codeEditor'
-					ref={this.codeEditor}
+					ref='codeEditor'
 					language='css'
 					view={this.state.view}
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
 					onChange={this.props.onStyleChange}
-					enableFolding={true}
-					editorTheme={this.state.editorTheme}
+					enableFolding={false}
 					rerenderParent={this.rerenderParent} />
 			</>;
 		}
@@ -454,36 +221,26 @@ const Editor = createClass({
 					rerenderParent={this.rerenderParent} />
 				<MetadataEditor
 					metadata={this.props.brew}
-					onChange={this.props.onMetaChange}
-					reportError={this.props.reportError}
-					userThemes={this.props.userThemes}/>
+					onChange={this.props.onMetaChange} />
 			</>;
 		}
 	},
 
 	redo : function(){
-		return this.codeEditor.current?.redo();
+		return this.refs.codeEditor?.redo();
 	},
 
 	historySize : function(){
-		return this.codeEditor.current?.historySize();
+		return this.refs.codeEditor?.historySize();
 	},
 
 	undo : function(){
-		return this.codeEditor.current?.undo();
-	},
-
-	foldCode : function(){
-		return this.codeEditor.current?.foldAllCode();
-	},
-
-	unfoldCode : function(){
-		return this.codeEditor.current?.unfoldAllCode();
+		return this.refs.codeEditor?.undo();
 	},
 
 	render : function(){
 		return (
-			<div className='editor' ref={this.editor}>
+			<div className='editor' ref='main'>
 				<SnippetBar
 					brew={this.props.brew}
 					view={this.state.view}
@@ -491,18 +248,9 @@ const Editor = createClass({
 					onInject={this.handleInject}
 					showEditButtons={this.props.showEditButtons}
 					renderer={this.props.renderer}
-					theme={this.props.brew.theme}
 					undo={this.undo}
 					redo={this.redo}
-					foldCode={this.foldCode}
-					unfoldCode={this.unfoldCode}
-					historySize={this.historySize()}
-					currentEditorTheme={this.state.editorTheme}
-					updateEditorTheme={this.updateEditorTheme}
-					snippetBundle={this.props.snippetBundle}
-					cursorPos={this.codeEditor.current?.getCursorPosition() || {}}
-					updateBrew={this.props.updateBrew}
-				/>
+					historySize={this.historySize()} />
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/editor.less

@@ -1,105 +1,61 @@
-@import 'themes/codeMirror/customEditorStyles.less';
-.editor {
+
+.editor{
 	position : relative;
 	width    : 100%;
 
-	.codeEditor {
+	.codeEditor{
 		height            : 100%;
-		.pageLine {
+		.pageLine{
 			background : #33333328;
-			border-top : #333399 solid 1px;
+			border-top : #339 solid 1px;
 		}
-		.editor-page-count {
-			float : right;
+		.editor-page-count{
 			color : grey;
+			float : right;
 		}
-		.columnSplit {
-			font-style        : italic;
-			color             : grey;
-			background-color  : fade(#229999, 15%);
-			border-bottom     : #229999 solid 1px;
+		.columnSplit{
+			font-style 			: italic;
+			color 				: grey;
+			background-color 	: fade(#299, 15%);
+			border-bottom    	: #299 solid 1px;
 		}
-		.define {
-			&:not(.term):not(.definition) {
-				font-weight   : bold;
-				color         : #949494;
-				background    : #E5E5E5;
-				border-radius : 3px;
-			}
-			&.term { color : rgb(96, 117, 143); }
-			&.definition { color : rgb(97, 57, 178); }
-		}
-		.block:not(.cm-comment) {
+		.block{
+			color 		: purple;
 			font-weight : bold;
-			color       : purple;
 			//font-style: italic;
 		}
-		.inline-block:not(.cm-comment) {
+		.inline-block{
+			color 		: red;
 			font-weight : bold;
-			color       : red;
 			//font-style: italic;
 		}
-		.injection:not(.cm-comment) {
-			font-weight : bold;
-			color       : green;
-		}
-		.emoji:not(.cm-comment) {
-			margin-left    : 2px;
-			color          : #360034;
-			background     : #ffc8ff;
-			border-radius  : 6px;
-			font-weight    : bold;
-			padding-bottom : 1px;
-			outline-offset : -2px;
-			outline        : solid 2px #ff96fc;
-		}
-		.superscript:not(.cm-comment) {
-			font-weight    : bold;
-			color          : goldenrod;
-			vertical-align : super;
-			font-size      : 0.9em;
-		}
-		.subscript:not(.cm-comment) {
-			font-weight    : bold;
-			color          : rgb(123, 123, 15);
-			vertical-align : sub;
-			font-size      : 0.9em;
-		}
-		.dl-highlight {
-			&.dl-colon-highlight {
-				font-weight   : bold;
-				color         : #949494;
-				background    : #E5E5E5;
-				border-radius : 3px;
-			}
-			&.dt-highlight { color : rgb(96, 117, 143); }
-			&.dd-highlight { color : rgb(97, 57, 178); }
-		}		
 	}
 
-	.brewJump {
-		position         : absolute;
-		right            : 20px;
-		bottom           : 20px;
-		z-index          : 1000000;
-		display          : flex;
-		align-items      : center;
-		justify-content  : center;
-		width            : 30px;
-		height           : 30px;
-		cursor           : pointer;
-		background-color : @teal;
-		.tooltipLeft('Jump to brew page');
+	.brewJump{
+		position			: absolute;
+		background-color	: @teal;
+		cursor				: pointer;
+		width 				: 30px;
+		height 				: 30px;
+		display 			: flex;
+		align-items 		: center;
+		bottom 				: 20px;
+		right 				: 20px;
+		z-index				: 1000000;
+		justify-content		: center;
+		.tooltipLeft("Jump to brew page");
 	}
 
-	.editorToolbar {
-		position  : absolute;
-		top       : 5px;
-		left      : 50%;
-		z-index   : 9;
-		font-size : 13px;
-		color     : black;
-		span { padding : 2px 5px; }
+	.editorToolbar{
+		position: absolute;
+		top: 5px;
+		left: 50%;
+		color: black;
+		font-size: 13px;
+		z-index: 9;
+		span {
+			padding: 2px 5px;
+		}
 	}
 
 }

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -1,90 +1,35 @@
-/* eslint-disable max-lines */
 require('./metadataEditor.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
-const request = require('../../utils/request-middleware.js');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Combobox = require('client/components/combobox.jsx');
-const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
-
-
-const Themes = require('themes/themes.json');
-const validations = require('./validations.js');
+const cx    = require('classnames');
+const request = require('superagent');
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
-const homebreweryThumbnail = require('../../thumbnail.png');
-
-const callIfExists = (val, fn, ...args)=>{
-	if(val[fn]) {
-		val[fn](...args);
-	}
-};
-
 const MetadataEditor = createClass({
 	displayName     : 'MetadataEditor',
 	getDefaultProps : function() {
 		return {
 			metadata : {
 				editId      : null,
-				shareId     : null,
 				title       : '',
 				description : '',
-				thumbnail   : '',
-				tags        : [],
+				tags        : '',
 				published   : false,
 				authors     : [],
 				systems     : [],
-				renderer    : 'legacy',
-				theme       : '5ePHB',
-				lang        : 'en'
+				renderer    : 'legacy'
 			},
-			onChange    : ()=>{},
-			reportError : ()=>{}
+			onChange : ()=>{}
 		};
 	},
 
-	getInitialState : function(){
-		return {
-			showThumbnail : true
-		};
-	},
-
-	toggleThumbnailDisplay : function(){
-		this.setState({
-			showThumbnail : !this.state.showThumbnail
-		});
-	},
-
-	renderThumbnail : function(){
-		if(!this.state.showThumbnail) return;
-		return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || homebreweryThumbnail}></img>;
-	},
-
 	handleFieldChange : function(name, e){
-		// load validation rules, and check input value against them
-		const inputRules = validations[name] ?? [];
-		const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
-
-		// if no validation rules, save to props
-		if(validationErr.length === 0){
-			callIfExists(e.target, 'setCustomValidity', '');
-			this.props.onChange({
-				...this.props.metadata,
-				[name] : e.target.value
-			});
-		} else {
-			// if validation issues, display built-in browser error popup with each error.
-			const errMessage = validationErr.map((err)=>{
-				return `- ${err}`;
-			}).join('\n');
-
-			callIfExists(e.target, 'setCustomValidity', errMessage);
-			callIfExists(e.target, 'reportValidity');
-		}
+		this.props.onChange(_.merge({}, this.props.metadata, {
+			[name] : e.target.value
+		}));
 	},
-
 	handleSystem : function(system, e){
 		if(e.target.checked){
 			this.props.metadata.systems.push(system);
@@ -93,31 +38,16 @@ const MetadataEditor = createClass({
 		}
 		this.props.onChange(this.props.metadata);
 	},
-
 	handleRenderer : function(renderer, e){
 		if(e.target.checked){
 			this.props.metadata.renderer = renderer;
-			if(renderer == 'legacy')
-				this.props.metadata.theme = '5ePHB';
 		}
-		this.props.onChange(this.props.metadata, 'renderer');
+		this.props.onChange(this.props.metadata);
 	},
 	handlePublish : function(val){
-		this.props.onChange({
-			...this.props.metadata,
+		this.props.onChange(_.merge({}, this.props.metadata, {
 			published : val
-		});
-	},
-
-	handleTheme : function(theme){
-		this.props.metadata.renderer = theme.renderer;
-		this.props.metadata.theme    = theme.path;
-		this.props.onChange(this.props.metadata, 'theme');
-	},
-
-	handleLanguage : function(languageCode){
-		this.props.metadata.lang = languageCode;
-		this.props.onChange(this.props.metadata);
+		}));
 	},
 
 	handleDelete : function(){
@@ -129,14 +59,10 @@ const MetadataEditor = createClass({
 			if(!confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
 		}
 
-		request.delete(`/api/${this.props.metadata.googleId ?? ''}${this.props.metadata.editId}`)
+		request.delete(`/api/${this.props.metadata.editId}`)
 			.send()
-			.end((err, res)=>{
-				if(err) {
-					this.props.reportError(err);
-				} else {
-					window.location.href = '/';
-				}
+			.end(function(err, res){
+				window.location.href = '/';
 			});
 	},
 
@@ -190,95 +116,6 @@ const MetadataEditor = createClass({
 		</div>;
 	},
 
-	renderThemeDropdown : function(){
-		if(!global.enable_themes) return;
-
-		const mergedThemes = _.merge(Themes, this.props.userThemes);
-
-		const listThemes = (renderer)=>{
-			return _.map(_.values(mergedThemes[renderer]), (theme)=>{
-				if(theme.path == this.props.metadata.shareId) return;
-				const preview = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
-				const texture = theme.thumbnail || `/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`;
-				return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme)} title={''}>
-					{theme.author ?? renderer} : {theme.name}
-					<div className='texture-container'>
-						<img src={texture}/>
-					</div>
-					<div className='preview'>
-						<h6>{theme.name} preview</h6>
-						<img src={preview}/>
-					</div>
-				</div>;
-			});
-		};
-
-		const currentRenderer = this.props.metadata.renderer;
-		const currentTheme    = mergedThemes[`${_.upperFirst(this.props.metadata.renderer)}`][this.props.metadata.theme]
-													?? { name: `!!! THEME MISSING !!! ID=${this.props.metadata.theme}` };
-		let dropdown;
-
-		if(currentRenderer == 'legacy') {
-			dropdown =
-				<Nav.dropdown className='disabled value' trigger='disabled'>
-					<div> {`Themes are not supported in the Legacy Renderer`} <i className='fas fa-caret-down'></i> </div>
-				</Nav.dropdown>;
-		} else {
-			dropdown =
-				<Nav.dropdown className='value' trigger='click'>
-					<div> {currentTheme.author ?? _.upperFirst(currentRenderer)} : {currentTheme.name} <i className='fas fa-caret-down'></i> </div>
-
-					{listThemes(currentRenderer)}
-				</Nav.dropdown>;
-		}
-
-		return <div className='field themes'>
-			<label>theme</label>
-			{dropdown}
-		</div>;
-	},
-
-	renderLanguageDropdown : function(){
-		const langCodes = ['en', 'de', 'de-ch', 'fr', 'ja', 'es', 'it', 'sv', 'ru', 'zh-Hans', 'zh-Hant'];
-		const listLanguages = ()=>{
-			return _.map(langCodes.sort(), (code, index)=>{
-				const localName = new Intl.DisplayNames([code], { type: 'language' });
-				const englishName = new Intl.DisplayNames('en', { type: 'language' });
-				return <div className='item' title={`${englishName.of(code)}`} key={`${index}`} data-value={`${code}`} data-detail={`${localName.of(code)}`}>
-					{`${code}`}
-					<div className='detail'>{`${localName.of(code)}`}</div>
-				</div>;
-			});
-		};
-
-		const debouncedHandleFieldChange =  _.debounce(this.handleFieldChange, 500);
-
-		return <div className='field language'>
-			<label>language</label>
-			<div className='value'>
-				<Combobox trigger='click'
-					className='language-dropdown'
-					default={this.props.metadata.lang || ''}
-					placeholder='en'
-					onSelect={(value)=>this.handleLanguage(value)}
-					onEntry={(e)=>{
-						e.target.setCustomValidity('');	//Clear the validation popup while typing
-						debouncedHandleFieldChange('lang', e);
-					}}
-					options={listLanguages()}
-					autoSuggest={{
-						suggestMethod           : 'startsWith',
-						clearAutoSuggestOnClick : true,
-						filterOn                : ['data-value', 'data-detail', 'title']
-					}}
-				>
-				</Combobox>
-				<small>Sets the HTML Lang property for your brew. May affect hyphenation or spellcheck.</small>
-			</div>
-
-		</div>;
-	},
-
 	renderRenderOptions : function(){
 		if(!global.enable_v3) return;
 
@@ -304,47 +141,36 @@ const MetadataEditor = createClass({
 						onChange={(e)=>this.handleRenderer('V3', e)} />
 					V3
 				</label>
-				<small><a href='/legacy' target='_blank' rel='noopener noreferrer'>Click here to see the demo page for the old Legacy renderer!</a></small>
+
+				<a href='/v3_preview' target='_blank' rel='noopener noreferrer'>
+					Click here for a quick intro to V3!
+				</a>
 			</div>
 		</div>;
 	},
 
 	render : function(){
 		return <div className='metadataEditor'>
-			<h1>Properties Editor</h1>
-
 			<div className='field title'>
 				<label>title</label>
 				<input type='text' className='value'
-					defaultValue={this.props.metadata.title}
+					value={this.props.metadata.title}
 					onChange={(e)=>this.handleFieldChange('title', e)} />
 			</div>
-			<div className='field-group'>
-				<div className='field-column'>
-					<div className='field description'>
-						<label>description</label>
-						<textarea defaultValue={this.props.metadata.description} className='value'
-							onChange={(e)=>this.handleFieldChange('description', e)} />
-					</div>
-					<div className='field thumbnail'>
-						<label>thumbnail</label>
-						<input type='text'
-							defaultValue={this.props.metadata.thumbnail}
-							placeholder='https://my.thumbnail.url'
-							className='value'
-							onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
-						<button className='display' onClick={this.toggleThumbnailDisplay}>
-							<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
-						</button>
-					</div>
-				</div>
-				{this.renderThumbnail()}
+			<div className='field description'>
+				<label>description</label>
+				<textarea value={this.props.metadata.description} className='value'
+					onChange={(e)=>this.handleFieldChange('description', e)} />
 			</div>
+			{/*}
+			<div className='field tags'>
+				<label>tags</label>
+				<textarea value={this.props.metadata.tags}
+					onChange={(e)=>this.handleFieldChange('tags', e)} />
+			</div>
+			*/}
 
-			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
-				placeholder='add tag' unique={true}
-				values={this.props.metadata.tags}
-				onChange={(e)=>this.handleFieldChange('tags', e)}/>
+			{this.renderAuthors()}
 
 			<div className='field systems'>
 				<label>systems</label>
@@ -353,30 +179,13 @@ const MetadataEditor = createClass({
 				</div>
 			</div>
 
-			{this.renderLanguageDropdown()}
-
-			{this.renderThemeDropdown()}
-
 			{this.renderRenderOptions()}
 
-			<h2>Authors</h2>
-
-			{this.renderAuthors()}
-
-			<StringArrayEditor label='invited authors' valuePatterns={[/.+/]}
-				validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
-				placeholder='invite author' unique={true}
-				values={this.props.metadata.invitedAuthors}
-				notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']}
-				onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}/>
-
-			<h2>Privacy</h2>
-
 			<div className='field publish'>
 				<label>publish</label>
 				<div className='value'>
 					{this.renderPublish()}
-					<small>Published brews are searchable in <a href='/vault'>the Vault</a> and visible on your user page.  Unpublished brews are not indexed in the Vault or visible on your user page, but can still be shared and indexed by search engines.  You can unpublish a brew any time.</small>
+					<small>Published homebrews will be publicly viewable and searchable (eventually...)</small>
 				</div>
 			</div>
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,323 +1,84 @@
-@import 'naturalcrit/styles/colors.less';
 
-
-.metadataEditor {
+.metadataEditor{
 	position         : absolute;
-	z-index          : 5;
+	z-index          : 10000;
 	box-sizing       : border-box;
 	width            : 100%;
-	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
 	padding          : 25px;
-	overflow-y       : auto;
-	background-color : #999999;
-	font-size		 : 13px;
-
-	h1 {
-		margin: 0 0 40px;
-		font-weight: bold;
-		text-transform: uppercase;
-	}
-	
-	h2 {
-		margin      : 20px 0;
-		font-weight : bold;
-		border-bottom: 2px solid gray;
-		color: #555;
-	}
-
-	& > div { margin-bottom : 10px; }
-
-	.field-group {
-		display   : flex;
-		flex-wrap : wrap;
-		gap       : 10px;
-		width     : 100%;
-	}
-
-	.field-column {
-		display        : flex;
-		flex           : 5 0 200px;
-		flex-direction : column;
-		gap            : 10px;
-	}
-
-
-
-	.field {
-		position      : relative;
+	background-color : #999;
+	.field{
 		display       : flex;
-		flex-wrap     : wrap;
 		width         : 100%;
-		min-width     : 200px;
-		& > label {
+		margin-bottom : 10px;
+		&>label{
+			display        : inline-block;
+			vertical-align : top;
 			width          : 80px;
+			font-size      : 0.7em;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
-			font-size: .9em;
+			flex           : 0 0 auto;
 		}
-		& > .value {
+		&>.value{
 			flex           : 1 1 auto;
-			width          : 50px;
-			&:invalid { background : #FFB9B9; }
-			small {
-				display     : block;
-				font-size   : 0.9em;
-				font-style  : italic;
-				line-height : 1.4em;
-			}
-		}
-		input[type='text'], textarea {
-			border : 1px solid gray;
-			&:focus { outline : 1px solid #444444; }
-		}
-		&.thumbnail {
-			height      : 1.4em;
-			label { line-height : 2.0em; }
-			.value {
-				overflow      : hidden;
-				text-overflow : ellipsis;
-			}
-			button {
-				padding          : 0px 5px;
-				color            : white;
-				background-color : black;
-				border           : 1px solid #999999;
-				&:hover { background-color : #777777; }
-			}
-		}
-
-		&.description {
-			flex : 1;
-			textarea.value {
-				height      : auto;
-				font-family : 'Open Sans', sans-serif;
-				resize      : none;
-			}
-		}
-
-		&.language .language-dropdown {
-			z-index   : 200;
-			max-width : 150px;
+			min-width      : 200px;
 		}
 	}
-
-
-	.thumbnail-preview {
-		position         : relative;
-		flex             : 1 1;
-		justify-self     : center;
-		width            : 80px;
-		height           : min-content;
-		max-height       : 115px;
-		aspect-ratio     : 1 / 1;
-		object-fit       : contain;
-		background-color : #AAAAAA;
+	.description.field textarea.value{
+		resize      : none;
+		height      : 5em;
+		font-family : 'Open Sans', sans-serif;
+		font-size   : 0.8em;
 	}
-
-	.systems.field .value {
-		label {
+	.systems.field .value{
+		label{
+			vertical-align : middle;
+			margin-right   : 15px;
+			cursor         : pointer;
+			font-size      : 0.7em;
+			font-weight    : 800;
+			user-select    : none;
+			white-space    : nowrap;
 			display        : inline-flex;
 			align-items    : center;
-			margin-right   : 15px;
-			font-size      : 0.9em;
-			font-weight    : 800;
-			white-space    : nowrap;
-			vertical-align : middle;
-			cursor         : pointer;
-			user-select    : none;
 		}
-		input {
-			margin         : 3px;
+		a {
+			font-size   : 0.7em;
+			font-weight : 800;
+			display     : inline-flex;
+		}
+		input{
 			vertical-align : middle;
 			cursor         : pointer;
+			margin         : 3px;
 		}
 	}
-	.publish.field .value {
-		position      : relative;
-		margin-bottom : 15px;
-		button { width : 100%; }
-		button.publish {
+	.publish.field .value{
+		position : relative;
+		margin-bottom: 15px;
+		button{
+			width:100%;
+		}
+		button.publish{
 			.button(@blueLight);
 		}
-		button.unpublish {
+		button.unpublish{
 			.button(@silver);
 		}
+		small{
+			font-size  : 0.6em;
+			font-style : italic;
+		}
 	}
 
-	.delete.field .value {
-		button {
+	.delete.field .value{
+		button{
 			.button(@red);
 		}
 	}
-	.authors.field .value {
+	.authors.field .value{
+		font-size: 0.8em;
 		line-height    : 1.5em;
 	}
-
-	.themes.field {
-		.navDropdownContainer {
-			position         : relative;
-			z-index          : 100;
-			background-color : white;
-			&.disabled {
-				font-style       : italic;
-				color            : dimgray;
-				background-color : darkgray;
-			}
-			& > div:first-child {
-				padding           : 3px 3px;
-				background-color  : inherit;
-				border            : 1px solid gray;
-				i { float	: right; }
-				&:hover {
-					color            : white;
-					background-color : @blue;
-				}
-			}
-			.navDropdown .item > p {
-				width         : 45%;
-				height        : 1.1em;
-				overflow      : hidden;
-				text-overflow : ellipsis;
-				white-space   : nowrap;
-			}			
-			.navDropdown {
-				position	  : absolute;
-				width		    : 100%;
-				box-shadow	: 0px 5px 10px rgba(0, 0, 0, 0.3);
-				.item {
-					position          : relative;
-					padding           : 3px 3px;
-					overflow          : visible;
-					background-color  : white;
-					border-top        : 1px solid rgb(118, 118, 118);
-					.preview {
-						position       : absolute;
-						top            : 0;
-						right          : 0;
-						z-index        : 1;
-						display        : flex;
-						flex-direction : column;
-						width          : 200px;
-						overflow       : hidden;
-						color          : black;
-						background     : #CCCCCC;
-						border-radius  : 5px;
-						box-shadow     : 0 0 5px black;
-						opacity        : 0;
-						transition     : opacity 250ms ease;
-						h6 {
-							padding-block  : 0.5em;
-							padding-inline : 1em;
-							font-weight    : 900;
-							border-bottom  : 2px solid hsl(0,0%,40%);
-						}
-					}
-					&:hover {
-						color            : white;
-						background-color : @blue;
-					}
-					&:hover > .preview { opacity : 1; }
-					.texture-container {
-						position   : absolute;
-						top        : 0;
-						left       : 0;
-						width      : 100%;
-						height     : 100%;
-						min-height : 100%;
-						overflow   : hidden;
-						> img {
-							position            : absolute;
-							top                 : 0px;
-							right               : 0;
-							width               : 50%;
-							min-height          : 100%;
-							-webkit-mask-image  : linear-gradient(90deg, transparent, black 20%);
-							mask-image          : linear-gradient(90deg, transparent, black 20%);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.field .list {
-		display   : flex;
-		flex      : 1 0;
-		flex-wrap : wrap;
-
-		> * { flex : 0 0 auto; }
-
-		#groupedIcon {
-			#backgroundColors;
-			position   : relative;
-			top        : -0.3em;
-			right      : -0.3em;
-			display    : inline-block;
-			min-width  : 20px;
-			height     : ~'calc(100% + 0.6em)';
-			color      : white;
-			text-align : center;
-			cursor     : pointer;
-	
-			i {
-				position  : relative;
-				top       : 50%;
-				transform : translateY(-50%);
-			}
-	
-			&:not(:last-child) { border-right : 1px solid black; }
-	
-			&:last-child { border-radius : 0 0.5em 0.5em 0; }
-		}
-
-		.badge {
-			padding          : 0.3em;
-			margin           : 2px;
-			font-size        : 0.9em;
-			background-color : #DDDDDD;
-			border-radius    : 0.5em;
-
-			.icon { #groupedIcon; }
-		}
-
-		.input-group {
-			height : ~'calc(.9em + 4px + .6em)';
-
-			input { border-radius : 0.5em 0 0 0.5em; }
-
-			input:last-child { border-radius : 0.5em; }
-
-			.value {
-				width     : 7.5vw;
-				min-width : 75px;
-				height    : 100%;
-			}
-
-			.input-group {
-				height : ~'calc(.9em + 4px + .6em)';
-
-				input { border-radius : 0.5em 0 0 0.5em; }
-
-				input:last-child { border-radius : 0.5em; }
-
-				.value {
-					width     : 7.5vw;
-					min-width : 75px;
-					height    : 100%;
-				}
-
-				.invalid:focus { background-color : pink; }
-
-				.icon {
-					#groupedIcon;
-					top       : -0.54em;
-					right     : 1px;
-					height    : 97%;
-
-					i { font-size : 1.125em; }
-				}
-			}
-		}
-	}
-}
+}

client/homebrew/editor/metadataEditor/validations.js

@@ -1,34 +0,0 @@
-module.exports = {
-	title : [
-		(value)=>{
-			return value?.length > 100 ? 'Max title length of 100 characters' : null;
-		}
-	],
-	description : [
-		(value)=>{
-			return value?.length > 500 ? 'Max description length of 500 characters.' : null;
-		}
-	],
-	thumbnail : [
-		(value)=>{
-			return value?.length > 256 ? 'Max URL length of 256 characters.' : null;
-		},
-		(value)=>{
-			if(value?.length == 0){return null;}
-			try {
-				Boolean(new URL(value));
-				return null;
-			} catch (e) {
-				return 'Must be a valid URL';
-			}
-		}
-	],
-	lang : [
-		(value)=>{
-			return new RegExp(/^([a-zA-Z]{2,3})(-[a-zA-Z]{4})?(-(?:[0-9]{3}|[a-zA-Z]{2}))?$/).test(value) === false && (value.length > 0) ? 'Invalid language code.' : null;
-		}
-	]
-};
-
-
-

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,24 +1,15 @@
-/*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
 require('./snippetbar.less');
 const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 
-import { loadHistory } from '../../utils/versionHistory.js';
 
-//Import all themes
-const ThemeSnippets = {};
-ThemeSnippets['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js');
-ThemeSnippets['V3_5ePHB']     = require('themes/V3/5ePHB/snippets.js');
-ThemeSnippets['V3_5eDMG']     = require('themes/V3/5eDMG/snippets.js');
-ThemeSnippets['V3_Journal']   = require('themes/V3/Journal/snippets.js');
-ThemeSnippets['V3_Blank']     = require('themes/V3/Blank/snippets.js');
+const SnippetsLegacy = require('./snippetsLegacy/snippets.js');
+const SnippetsV3 = require('./snippets/snippets.js');
 
-const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json');
-
-const execute = function(val, props){
-	if(_.isFunction(val)) return val(props);
+const execute = function(val, brew){
+	if(_.isFunction(val)) return val(brew);
 	return val;
 };
 
@@ -26,130 +17,36 @@ const Snippetbar = createClass({
 	displayName     : 'SnippetBar',
 	getDefaultProps : function() {
 		return {
-			brew              : {},
-			view              : 'text',
-			onViewChange      : ()=>{},
-			onInject          : ()=>{},
-			onToggle          : ()=>{},
-			showEditButtons   : true,
-			renderer          : 'legacy',
-			undo              : ()=>{},
-			redo              : ()=>{},
-			historySize       : ()=>{},
-			foldCode          : ()=>{},
-			unfoldCode        : ()=>{},
-			updateEditorTheme : ()=>{},
-			cursorPos         : {},
-			snippetBundle     : [],
-			updateBrew        : ()=>{}
+			brew            : {},
+			view            : 'text',
+			onViewChange    : ()=>{},
+			onInject        : ()=>{},
+			onToggle        : ()=>{},
+			showEditButtons : true,
+			renderer        : 'legacy',
+			undo            : ()=>{},
+			redo            : ()=>{},
+			historySize     : ()=>{}
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			renderer      : this.props.renderer,
-			themeSelector : false,
-			snippets      : [],
-			showHistory   : false,
-			historyExists : false,
-			historyItems  : []
+			renderer : this.props.renderer
 		};
 	},
 
-	componentDidMount : async function(prevState) {
-		const snippets = this.compileSnippets();
-		this.setState({
-			snippets : snippets
-		});
-	},
-
-	componentDidUpdate : async function(prevProps, prevState) {
-		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme || prevProps.snippetBundle != this.props.snippetBundle) {
-			this.setState({
-				snippets : this.compileSnippets()
-			});
-		};
-
-		// Update history list if it has changed
-		const checkHistoryItems = await loadHistory(this.props.brew);
-
-		// If all items have the noData property, there is no saved data
-		const checkHistoryExists = !checkHistoryItems.every((historyItem)=>{
-			return historyItem?.noData;
-		});
-		if(prevState.historyExists != checkHistoryExists){
-			this.setState({
-				historyExists : checkHistoryExists
-			});
-		}
-
-		// If any history items have changed, update the list
-		if(checkHistoryExists && checkHistoryItems.some((historyItem, index)=>{
-			return index >= prevState.historyItems.length || !_.isEqual(historyItem, prevState.historyItems[index]);
-		})){
-			this.setState({
-				historyItems : checkHistoryItems
-			});
-		}
-	},
-
-	mergeCustomizer : function(oldValue, newValue, key) {
-		if(key == 'snippets') {
-			const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
-			return result.filter((snip)=>snip.gen || snip.subsnippets);
-		}
-	},
-
-	compileSnippets : function() {
-		let compiledSnippets = [];
-
-		let oldSnippets = _.keyBy(compiledSnippets, 'groupName');
-
-		for (let snippets of this.props.snippetBundle) {
-			if(typeof(snippets) == 'string')	// load staticThemes as needed; they were sent as just a file name
-				snippets = ThemeSnippets[snippets];
-
-			const newSnippets = _.keyBy(_.cloneDeep(snippets), 'groupName');
-			compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, this.mergeCustomizer));
-
-			oldSnippets = _.keyBy(compiledSnippets, 'groupName');
-		}
-		return compiledSnippets;
-	},
-
 	handleSnippetClick : function(injectedText){
 		this.props.onInject(injectedText);
 	},
 
-	toggleThemeSelector : function(e){
-		if(e.target.tagName != 'SELECT'){
-			this.setState({
-				themeSelector : !this.state.themeSelector
-			});
-		}
-	},
-
-	changeTheme : function(e){
-		if(e.target.value == this.props.currentEditorTheme) return;
-		this.props.updateEditorTheme(e.target.value);
-
-		this.setState({
-			showThemeSelector : false,
-		});
-	},
-
-	renderThemeSelector : function(){
-		return <div className='themeSelector'>
-			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
-				{EditorThemes.map((theme, key)=>{
-					return <option key={key} value={theme}>{theme}</option>;
-				})}
-			</select>
-		</div>;
-	},
-
 	renderSnippetGroups : function(){
-		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
+		let snippets = [];
+
+		if(this.props.renderer === 'V3')
+			snippets = SnippetsV3.filter((snippetGroup)=>snippetGroup.view === this.props.view);
+		else
+			snippets = SnippetsLegacy.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
 		return _.map(snippets, (snippetGroup)=>{
 			return <SnippetGroup
@@ -159,72 +56,14 @@ const Snippetbar = createClass({
 				snippets={snippetGroup.snippets}
 				key={snippetGroup.groupName}
 				onSnippetClick={this.handleSnippetClick}
-				cursorPos={this.props.cursorPos}
 			/>;
 		});
 	},
 
-	replaceContent : function(item){
-		return this.props.updateBrew(item);
-	},
-
-	toggleHistoryMenu : function(){
-		this.setState({
-			showHistory : !this.state.showHistory
-		});
-	},
-
-	renderHistoryItems : function() {
-		if(!this.state.historyExists) return;
-
-		return <div className='dropdown'>
-			{_.map(this.state.historyItems, (item, index)=>{
-				if(item.noData || !item.savedAt) return;
-
-				const saveTime = new Date(item.savedAt);
-				const diffMs = new Date() - saveTime;
-				const diffSecs = Math.floor(diffMs / 1000);
-
-				let diffString = `about ${diffSecs} seconds ago`;
-
-				if(diffSecs > 60) diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
-				if(diffSecs > (60 * 60)) diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
-				if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
-				if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
-
-				return <div className='snippet' key={index} onClick={()=>{this.replaceContent(item);}} >
-					<i className={`fas fa-${index+1}`} />
-					<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
-				</div>;
-			})}
-		</div>;
-	},
-
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
 
-		let foldButtons;
-		if(this.props.view == 'text'){
-			foldButtons =
-				<>
-					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-						onClick={this.props.foldCode} >
-						<i className='fas fa-compress-alt' />
-					</div>
-					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-						onClick={this.props.unfoldCode} >
-						<i className='fas fa-expand-alt' />
-					</div>
-				</>;
-
-		}
-
 		return <div className='editors'>
-			<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
-				onClick={this.toggleHistoryMenu} >
-				<i className='fas fa-clock-rotate-left' />
-				{ this.state.showHistory && this.renderHistoryItems() }
-			</div>
 			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
 				onClick={this.props.undo} >
 				<i className='fas fa-undo' />
@@ -233,14 +72,6 @@ const Snippetbar = createClass({
 				onClick={this.props.redo} >
 				<i className='fas fa-redo' />
 			</div>
-			<div className='divider'></div>
-			{foldButtons}
-			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-				onClick={this.toggleThemeSelector} >
-				<i className='fas fa-palette' />
-				{this.state.themeSelector && this.renderThemeSelector()}
-			</div>
-
 			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
@@ -283,23 +114,15 @@ const SnippetGroup = createClass({
 			onSnippetClick : function(){},
 		};
 	},
-	handleSnippetClick : function(e, snippet){
-		e.stopPropagation();
-		this.props.onSnippetClick(execute(snippet.gen, this.props));
+	handleSnippetClick : function(snippet){
+		this.props.onSnippetClick(execute(snippet.gen, this.props.brew));
 	},
-	renderSnippets : function(snippets){
-		return _.map(snippets, (snippet)=>{
-			return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
+	renderSnippets : function(){
+		return _.map(this.props.snippets, (snippet)=>{
+			return <div className='snippet' key={snippet.name} onClick={()=>this.handleSnippetClick(snippet)}>
 				<i className={snippet.icon} />
-				<span className='name'title={snippet.name}>{snippet.name}</span>
-				{snippet.experimental && <span className='beta'>beta</span>}
-				{snippet.subsnippets && <>
-					<i className='fas fa-caret-right'></i>
-					<div className='dropdown side'>
-						{this.renderSnippets(snippet.subsnippets)}
-					</div></>}
+				{snippet.name}
 			</div>;
-
 		});
 	},
 
@@ -310,8 +133,9 @@ const SnippetGroup = createClass({
 				<span className='groupName'>{this.props.groupName}</span>
 			</div>
 			<div className='dropdown'>
-				{this.renderSnippets(this.props.snippets)}
+				{this.renderSnippets()}
 			</div>
 		</div>;
 	},
+
 });

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,207 +1,113 @@
-@import (less) './client/icons/customIcons.less';
-@import (less) '././././themes/fonts/5e/fonts.less';
 
-.snippetBar {
+.snippetBar{
 	@menuHeight      : 25px;
 	position         : relative;
 	height           : @menuHeight;
-	color            : black;
-	background-color : #DDDDDD;
-
-	.editors {
+	background-color : #ddd;
+	.editors{
 		position        : absolute;
+		display         : flex;
 		top             : 0px;
 		right           : 0px;
-		display         : flex;
-		justify-content : space-between;
 		height          : @menuHeight;
-		& > div {
-			width       : @menuHeight;
+		width           : 125px;
+		justify-content : space-between;
+		&>div{
 			height      : @menuHeight;
+			width       : @menuHeight;
+			cursor      : pointer;
 			line-height : @menuHeight;
 			text-align  : center;
-			cursor      : pointer;
-			&:hover,&.selected { background-color : #999999; }
-			&.text {
+			&:hover,&.selected{
+				background-color : #999;
+			}
+			&.text{
 				.tooltipLeft('Brew Editor');
 			}
-			&.style {
+			&.style{
 				.tooltipLeft('Style Editor');
 			}
-			&.meta {
+			&.meta{
 				.tooltipLeft('Properties');
 			}
-			&.undo {
+			&.undo{
 				.tooltipLeft('Undo');
 				font-size : 0.75em;
 				color     : grey;
-				&.active { color : inherit; }
+				&.active{
+					color : black;
+				}
 			}
-			&.redo {
+			&.redo{
 				.tooltipLeft('Redo');
 				font-size : 0.75em;
 				color     : grey;
-				&.active { color : inherit; }
-			}
-			&.foldAll {
-				.tooltipLeft('Fold All');
-				font-size : 0.75em;
-				color     : inherit;
-			}
-			&.unfoldAll {
-				.tooltipLeft('Unfold All');
-				font-size : 0.75em;
-				color     : inherit;
-			}
-			&.history {
-				.tooltipLeft('History');
-				font-size : 0.75em;
-				color     : grey;
-				position  : relative;
-				&.active {
-					color : inherit;
-				}
-				&>.dropdown{
-					right         : -1px;
-					&>.snippet{
-						padding-right : 10px;
-					}
-				}
-			}
-			&.editorTheme {
-				.tooltipLeft('Editor Themes');
-				font-size : 0.75em;
-				color     : black;
-				&.active {
-					position         : relative;
-					background-color : #999999;
+				&.active{
+					color : black;
 				}
 			}
 			&.divider {
-				width      : 5px;
-				background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
-				&:hover { background-color : inherit; }
+				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
+				width: 5px;
+				&:hover{
+					background-color: inherit;
+				}
 			}
 		}
-		.themeSelector {
-			position         : absolute;
-			top              : 25px;
-			right            : 0;
-			z-index          : 10;
-			display          : flex;
-			align-items      : center;
-			justify-content  : center;
-			width            : 170px;
-			height           : inherit;
-			background-color : inherit;
-		}
 	}
-	.snippetBarButton {
-		display        : inline-block;
+	.snippetBarButton{
 		height         : @menuHeight;
-		padding        : 0px 5px;
-		font-size      : 0.625em;
-		font-weight    : 800;
 		line-height    : @menuHeight;
+		display        : inline-block;
+		padding        : 0px 5px;
+		font-weight    : 800;
+		font-size      : 0.625em;
 		text-transform : uppercase;
 		cursor         : pointer;
-		&:hover, &.selected { background-color : #999999; }
-		i {
+		&:hover, &.selected{
+			background-color : #999;
+		}
+		i{
+			vertical-align : middle;
 			margin-right   : 3px;
 			font-size      : 1.4em;
-			vertical-align : middle;
 		}
 	}
-	.toggleMeta {
-		position    : absolute;
-		top         : 0px;
-		right       : 0px;
-		border-left : 1px solid black;
-		.tooltipLeft('Edit Brew Properties');
+	.toggleMeta{
+		position     : absolute;
+		top          : 0px;
+		right        : 0px;
+		border-left  : 1px solid black;
+		.tooltipLeft("Edit Brew Properties");
 	}
-	.snippetGroup {
-		border-right   : 1px solid currentColor;
-		&:hover {
-			& > .dropdown { visibility : visible; }
+	.snippetGroup{
+		border-right   : 1px solid black;
+		&:hover{
+			.dropdown{
+				visibility : visible;
+			}
 		}
-		.dropdown {
+		.dropdown{
 			position         : absolute;
 			top              : 100%;
-			z-index          : 1000;
-			padding          : 0px;
-			margin-left      : -5px;
 			visibility       : hidden;
-			background-color : #DDDDDD;
-			.snippet {
-				position    : relative;
-				display     : flex;
-				align-items : center;
-				min-width   : max-content;
-				padding     : 5px;
-				font-size   : 10px;
-				cursor      : pointer;
+			z-index          : 1000;
+			margin-left      : -5px;
+			padding          : 0px;
+			background-color : #ddd;
+			.snippet{
 				.animate(background-color);
-				i {
-					height       : 1.2em;
+				padding   : 5px;
+				cursor    : pointer;
+				font-size : 10px;
+				i{
 					margin-right : 8px;
 					font-size    : 1.2em;
-					min-width: 25px;
-					text-align: center;
-					& ~ i {
-						margin-right : 0;
-						margin-left  : 5px;
-					}
-					/* Fonts */
-					&.font {
-						height : auto;
-						&::before {
-							font-size : 1em;
-							content   : 'ABC';
-						}
-
-						&.OpenSans {font-family : 'OpenSans';}
-						&.CodeBold {font-family : 'CodeBold';}
-						&.CodeLight {font-family : 'CodeLight';}
-						&.ScalySansRemake {font-family : 'ScalySansRemake';}
-						&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
-						&.MrEavesRemake {font-family : 'MrEavesRemake';}
-						&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
-						&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
-						&.WalterTurncoat {font-family : 'WalterTurncoat';}
-						&.Lato {font-family : 'Lato';}
-						&.Courier {font-family : 'Courier';}
-						&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
-						&.Overpass {font-family : 'Overpass';}
-						&.Davek {font-family : 'Davek';}
-						&.Iokharic {font-family : 'Iokharic';}
-						&.Rellanic {font-family : 'Rellanic';}
-						&.TimesNewRoman {font-family : 'Times New Roman';}
-					}
 				}
-				.name { margin-right : auto; }
-				.beta {
-					align-self    : center;
-					padding       : 4px 6px;
-					margin-left   : 5px;
-					font-family   : monospace;
-					line-height   : 1em;
-					color         : white;
-					background    : grey;
-					border-radius : 12px;
-				}
-				&:hover {
-					background-color : #999999;
-					& > .dropdown {
-						visibility : visible;
-						&.side {
-							top         : 0%;
-							left        : 100%;
-							margin-left : 0;
-							box-shadow  : -1px 1px 2px 0px #999999;
-						}
-					}
+				&:hover{
+					background-color : #999;
 				}
 			}
 		}
 	}
-}
+}

client/homebrew/editor/snippetbar/snippets/classfeature.gen.js

@@ -9,7 +9,6 @@ module.exports = function(classname){
 	classname = classname.toLowerCase();
 
 	const hitDie = _.sample([4, 6, 8, 10, 12]);
-	const spellSkill = _.sample(['Wisdom', 'Charisma', 'Intelligence']);
 
 	const abilityList = ['Strength', 'Dexerity', 'Constitution', 'Wisdom', 'Charisma', 'Intelligence'];
 	const skillList = ['Acrobatics', 'Animal Handling', 'Arcana', 'Athletics', 'Deception', 'History', 'Insight', 'Intimidation', 'Investigation', 'Medicine', 'Nature', 'Perception', 'Performance', 'Persuasion', 'Religion', 'Sleight of Hand', 'Stealth', 'Survival'];
@@ -17,33 +16,27 @@ module.exports = function(classname){
 
 	return dedent`
 		## Class Features
-
 		As a ${classname}, you gain the following class features
-
 		#### Hit Points
+
 		**Hit Dice:**                    :: 1d${hitDie} per ${classname} level
 		**Hit Points at 1st Level:**     :: ${hitDie} + your Constitution modifier
 		**Hit Points at Higher Levels:** :: 1d${hitDie} (or ${hitDie/2 + 1}) + your Constitution modifier per ${classname} level after 1st
 
 		#### Proficiencies
+
 		**Armor:**   :: ${_.sampleSize(['Light armor', 'Medium armor', 'Heavy armor', 'Shields'], _.random(0, 3)).join(', ') || 'None'}
 		**Weapons:** :: ${_.sampleSize(['Squeegee', 'Rubber Chicken', 'Simple weapons', 'Martial weapons'], _.random(0, 2)).join(', ') || 'None'}
-		**Tools:**   :: ${_.sampleSize(['Artisan\'s tools', 'one musical instrument', 'Thieves\' tools'], _.random(0, 2)).join(', ') || 'None'}
+		**Tools:**   :: ${_.sampleSize(['Artian\'s tools', 'one musical instrument', 'Thieve\'s tools'], _.random(0, 2)).join(', ') || 'None'}
 
 		**Saving Throws:** :: ${_.sampleSize(abilityList, 2).join(', ')}
 		**Skills:**        :: Choose two from ${_.sampleSize(skillList, _.random(4, 6)).join(', ')}
 
-		#### Spellcasting Ability
-		{{text-align:center
-		**Spell save DC**:: = ${_.sample([6, 8, 10])} + your proficiency bonus + your ${spellSkill} modifier
-
-		**Spell attack modifier**:: = your proficiency bonus + your ${spellSkill} modifier
-		}}
-
 		#### Equipment
 		You start with the following equipment, in addition to the equipment granted by your background:
-		- (*a*) a martial weapon and a shield or (*b*) two martial weapons
-		- (*a*) five javelins or (*b*) any simple melee weapon
+		- *(a)* a martial weapon and a shield or *(b)* two martial weapons
+		- *(a)* five javelins or *(b)* any simple melee weapon
 		- ${_.sample(['10 lint fluffs', '1 button', 'a cherished lost sock'])}
+
 		`;
 };

client/homebrew/editor/snippetbar/snippets/classtable.gen.js

@@ -0,0 +1,132 @@
+const _ = require('lodash');
+
+const features = [
+	'Astrological Botany',
+	'Biochemical Sorcery',
+	'Civil Divination',
+	'Consecrated Augury',
+	'Demonic Anthropology',
+	'Divinatory Mineralogy',
+	'Exo Interfacer',
+	'Genetic Banishing',
+	'Gunpowder Torturer',
+	'Gunslinger Corruptor',
+	'Hermetic Geography',
+	'Immunological Cultist',
+	'Malefic Chemist',
+	'Mathematical Pharmacy',
+	'Nuclear Biochemistry',
+	'Orbital Gravedigger',
+	'Pharmaceutical Outlaw',
+	'Phased Linguist',
+	'Plasma Gunslinger',
+	'Police Necromancer',
+	'Ritual Astronomy',
+	'Sixgun Poisoner',
+	'Seismological Alchemy',
+	'Spiritual Illusionism',
+	'Statistical Occultism',
+	'Spell Analyst',
+	'Torque Interfacer'
+];
+
+const classnames = ['Ackerman', 'Berserker-Typist', 'Concierge', 'Fishmonger',
+	                  'Haberdasher', 'Manicurist', 'Netrunner', 'Weirkeeper'];
+
+const levels = ['1st', '2nd', '3rd', '4th', '5th',
+              	'6th', '7th', '8th', '9th', '10th',
+	              '11th', '12th', '13th', '14th', '15th',
+              	'16th', '17th', '18th', '19th', '20th'];
+
+const profBonus = [2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6];
+
+const maxes = [4, 3, 3, 3, 3, 2, 2, 1, 1];
+
+const drawSlots = function(Slots, rows, padding){
+	let slots = Number(Slots);
+	return _.times(rows, function(i){
+		const max = maxes[i];
+		if(slots < 1) return _.pad('—', padding);
+		const res = _.min([max, slots]);
+		slots -= res;
+		return _.pad(res.toString(), padding);
+	}).join(' | ');
+};
+
+module.exports = {
+	full : function(classes){
+		const classname = _.sample(classnames);
+
+
+		let cantrips = 3;
+		let spells = 1;
+		let slots = 2;
+		return `{{${classes}\n##### The ${classname}\n` +
+		`| Level | Proficiency | Features     | Cantrips | Spells | --- Spell Slots Per Spell Level ---|||||||||\n`+
+		`|      ^| Bonus      ^|             ^| Known   ^| Known ^|1st |2nd |3rd |4th |5th |6th |7th |8th |9th |\n`+
+		`|:-----:|:-----------:|:-------------|:--------:|:------:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|\n${
+			_.map(levels, function(levelName, level){
+				const res = [
+					_.pad(levelName, 5),
+					_.pad(`+${profBonus[level]}`, 2),
+					_.padEnd(_.sample(features), 21),
+					_.pad(cantrips.toString(), 8),
+					_.pad(spells.toString(), 6),
+					drawSlots(slots, 9, 2),
+				].join(' | ');
+
+				cantrips += _.random(0, 1);
+				spells += _.random(0, 1);
+				slots += _.random(0, 2);
+
+				return `| ${res} |`;
+			}).join('\n')}\n}}\n\n`;
+	},
+
+	half : function(classes){
+		const classname =  _.sample(classnames);
+
+		let featureScore = 1;
+		return `{{${classes}\n##### The ${classname}\n` +
+		`| Level | Proficiency Bonus | Features | ${_.pad(_.sample(features), 21)} |\n` +
+		`|:-----:|:-----------------:|:---------|:---------------------:|\n${
+			_.map(levels, function(levelName, level){
+				const res = [
+					_.pad(levelName, 5),
+					_.pad(`+${profBonus[level]}`, 2),
+					_.padEnd(_.sample(features), 23),
+					_.pad(`+${featureScore}`, 21),
+				].join(' | ');
+
+				featureScore += _.random(0, 1);
+
+				return `| ${res} |`;
+			}).join('\n')}\n}}\n\n`;
+	},
+
+	third : function(classes){
+		const classname = _.sample(classnames);
+
+		let cantrips = 3;
+		let spells = 1;
+		let slots = 2;
+		return `{{${classes}\n##### ${classname} Spellcasting\n` +
+		`| Class  | Cantrips | Spells  |--- Spells Slots per Spell Level ---||||\n` +
+		`| Level ^| Known   ^| Known  ^|   1st   |   2nd   |   3rd   |   4th   |\n` +
+		`|:------:|:--------:|:-------:|:-------:|:-------:|:-------:|:-------:|\n${
+			_.map(levels, function(levelName, level){
+				const res = [
+					_.pad(levelName, 6),
+					_.pad(cantrips.toString(), 8),
+					_.pad(spells.toString(), 7),
+					drawSlots(slots, 4, 7),
+				].join(' | ');
+
+				cantrips += _.random(0, 1);
+				spells += _.random(0, 1);
+				slots += _.random(0, 1);
+
+				return `| ${res} |`;
+			}).join('\n')}\n}}\n\n`;
+	}
+};

client/homebrew/editor/snippetbar/snippets/coverpage.gen.js

@@ -0,0 +1,124 @@
+const _ = require('lodash');
+
+const titles = [
+	'The Burning Gallows',
+	'The Ring of Nenlast',
+	'Below the Blind Tavern',
+	'Below the Hungering River',
+	'Before Bahamut\'s Land',
+	'The Cruel Grave from Within',
+	'The Strength of Trade Road',
+	'Through The Raven Queen\'s Worlds',
+	'Within the Settlement',
+	'The Crown from Within',
+	'The Merchant Within the Battlefield',
+	'Ioun\'s Fading Traveler',
+	'The Legion Ingredient',
+	'The Explorer Lure',
+	'Before the Charming Badlands',
+	'The Living Dead Above the Fearful Cage',
+	'Vecna\'s Hidden Sage',
+	'Bahamut\'s Demonspawn',
+	'Across Gruumsh\'s Elemental Chaos',
+	'The Blade of Orcus',
+	'Beyond Revenge',
+	'Brain of Insanity',
+	'Breed Battle!, A New Beginning',
+	'Evil Lake, A New Beginning',
+	'Invasion of the Gigantic Cat, Part II',
+	'Kraken War 2020',
+	'The Body Whisperers',
+	'The Diabolical Tales of the Ape-Women',
+	'The Doctor Immortal',
+	'The Doctor from Heaven',
+	'The Graveyard',
+	'Azure Core',
+	'Core Battle',
+	'Core of Heaven: The Guardian of Amazement',
+	'Deadly Amazement III',
+	'Dry Chaos IX',
+	'Gate Thunder',
+	'Guardian: Skies of the Dark Wizard',
+	'Lute of Eternity',
+	'Mercury\'s Planet: Brave Evolution',
+	'Ruby of Atlantis: The Quake of Peace',
+	'Sky of Zelda: The Thunder of Force',
+	'Vyse\'s Skies',
+	'White Greatness III',
+	'Yellow Divinity',
+	'Zidane\'s Ghost'
+];
+
+const subtitles = [
+	'In an ominous universe, a botanist opposes terrorism.',
+	'In a demon-haunted city, in an age of lies and hate, a physicist tries to find an ancient treasure and battles a mob of aliens.',
+	'In a land of corruption, two cyberneticists and a dungeon delver search for freedom.',
+	'In an evil empire of horror, two rangers battle the forces of hell.',
+	'In a lost city, in an age of sorcery, a librarian quests for revenge.',
+	'In a universe of illusions and danger, three time travellers and an adventurer search for justice.',
+	'In a forgotten universe of barbarism, in an era of terror and mysticism, a virtual reality programmer and a spy try to find vengance and battle crime.',
+	'In a universe of demons, in an era of insanity and ghosts, three bodyguards and a bodyguard try to find vengance.',
+	'In a kingdom of corruption and battle, seven artificial intelligences try to save the last living fertile woman.',
+	'In a universe of virutal reality and agony, in an age of ghosts and ghosts, a fortune-teller and a wanderer try to avert the apocalypse.',
+	'In a crime-infested kingdom, three martial artists quest for the truth and oppose evil.',
+	'In a terrifying universe of lost souls, in an era of lost souls, eight dancers fight evil.',
+	'In a galaxy of confusion and insanity, three martial artists and a duke battle a mob of psychics.',
+	'In an amazing kingdom, a wizard and a secretary hope to prevent the destruction of mankind.',
+	'In a kingdom of deception, a reporter searches for fame.',
+	'In a hellish empire, a swordswoman and a duke try to find the ultimate weapon and battle a conspiracy.',
+	'In an evil galaxy of illusion, in a time of technology and misery, seven psychiatrists battle crime.',
+	'In a dark city of confusion, three swordswomen and a singer battle lawlessness.',
+	'In an ominous empire, in an age of hate, two philosophers and a student try to find justice and battle a mob of mages intent on stealing the souls of the innocent.',
+	'In a kingdom of panic, six adventurers oppose lawlessness.',
+	'In a land of dreams and hopelessness, three hackers and a cyborg search for justice.',
+	'On a planet of mysticism, three travelers and a fire fighter quest for the ultimate weapon and oppose evil.',
+	'In a wicked universe, five seers fight lawlessness.',
+	'In a kingdom of death, in an era of illusion and blood, four colonists search for fame.',
+	'In an amazing kingdom, in an age of sorcery and lost souls, eight space pirates quest for freedom.',
+	'In a cursed empire, five inventors oppose terrorism.',
+	'On a crime-ridden planet of conspiracy, a watchman and an artificial intelligence try to find love and oppose lawlessness.',
+	'In a forgotten land, a reporter and a spy try to stop the apocalypse.',
+	'In a forbidden land of prophecy, a scientist and an archivist oppose a cabal of barbarians intent on stealing the souls of the innocent.',
+	'On an infernal world of illusion, a grave robber and a watchman try to find revenge and combat a syndicate of mages intent on stealing the source of all magic.',
+	'In a galaxy of dark magic, four fighters seek freedom.',
+	'In an empire of deception, six tomb-robbers quest for the ultimate weapon and combat an army of raiders.',
+	'In a kingdom of corruption and lost souls, in an age of panic, eight planetologists oppose evil.',
+	'In a galaxy of misery and hopelessness, in a time of agony and pain, five planetologists search for vengance.',
+	'In a universe of technology and insanity, in a time of sorcery, a computer techician quests for hope.',
+	'On a planet of dark magic and barbarism, in an age of horror and blasphemy, seven librarians search for fame.',
+	'In an empire of dark magic, in a time of blood and illusions, four monks try to find the ultimate weapon and combat terrorism.',
+	'In a forgotten empire of dark magic, six kings try to prevent the destruction of mankind.',
+	'In a galaxy of dark magic and horror, in an age of hopelessness, four marines and an outlaw combat evil.',
+	'In a mysterious city of illusion, in an age of computerization, a witch-hunter tries to find the ultimate weapon and opposes an evil corporation.',
+	'In a damned kingdom of technology, a virtual reality programmer and a fighter seek fame.',
+	'In a hellish kingdom, in an age of blasphemy and blasphemy, an astrologer searches for fame.',
+	'In a damned world of devils, an alien and a ranger quest for love and oppose a syndicate of demons.',
+	'In a cursed galaxy, in a time of pain, seven librarians hope to avert the apocalypse.',
+	'In a crime-infested galaxy, in an era of hopelessness and panic, three champions and a grave robber try to solve the ultimate crime.'
+];
+
+
+module.exports = ()=>{
+	return `<style>
+  .page#p1{ text-align:center; counter-increment: none; }
+  .page#p1:after{ display:none; }
+  .page:nth-child(2n) .pageNumber { left: inherit !important; right: 2px !important; }
+  .page:nth-child(2n+1) .pageNumber { right: inherit !important; left: 2px !important; }
+  .page:nth-child(2n)::after { transform: scaleX(1); }
+  .page:nth-child(2n+1)::after { transform: scaleX(-1); }
+  .page:nth-child(2n) .footnote { left: inherit; text-align: right; }
+  .page:nth-child(2n+1) .footnote { left: 80px; text-align: left; }
+</style>
+
+{{margin-top:225px}}
+
+# ${_.sample(titles)}
+
+{{margin-top:25px}}
+
+{{wide
+##### ${_.sample(subtitles)}
+}}
+
+\\page`;
+};

client/homebrew/editor/snippetbar/snippets/monsterblock.gen.js

@@ -171,7 +171,7 @@ module.exports = {
 			**Condition Immunities** :: ${genList(['groggy', 'swagged', 'weak-kneed', 'buzzed', 'groovy', 'melancholy', 'drunk'], 3)}
 			**Senses**               :: darkvision 60 ft., passive Perception ${_.random(3, 20)}
 			**Languages**            :: ${genList(['Common', 'Pottymouth', 'Gibberish', 'Latin', 'Jive'], 2)}
-			**Challenge**            :: ${_.random(0, 15)} (${_.random(10, 10000)} XP) {{bonus **Proficiency Bonus** +${_.random(2, 6)}}}
+			**Challenge**            :: ${_.random(0, 15)} (${_.random(10, 10000)} XP)
 			___
 			${_.times(_.random(genLines, genLines + 2), function(){return genAbilities();}).join('\n:\n')}
 			:

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -0,0 +1,403 @@
+/* eslint-disable max-lines */
+
+const MagicGen = require('./magic.gen.js');
+const ClassTableGen = require('./classtable.gen.js');
+const MonsterBlockGen = require('./monsterblock.gen.js');
+const ClassFeatureGen = require('./classfeature.gen.js');
+const CoverPageGen = require('./coverpage.gen.js');
+const TableOfContentsGen = require('./tableOfContents.gen.js');
+const dedent = require('dedent-tabs').default;
+const watercolorGen = require('./watercolor.gen.js');
+
+
+module.exports = [
+
+	{
+		groupName : 'Text Editor',
+		icon      : 'fas fa-pencil-alt',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Column Break',
+				icon : 'fas fa-columns',
+				gen  : '\n\\column\n'
+			},
+			{
+				name : 'New Page',
+				icon : 'fas fa-file-alt',
+				gen  : '\n\\page\n'
+			},
+			{
+				name : 'Vertical Spacing',
+				icon : 'fas fa-arrows-alt-v',
+				gen  : '\n::::\n'
+			},
+			{
+				name : 'Horizontal Spacing',
+				icon : 'fas fa-arrows-alt-h',
+				gen  : ' {{width:100px}} '
+			},
+			{
+				name : 'Wide Block',
+				icon : 'fas fa-window-maximize',
+				gen  : dedent`\n
+					{{wide
+					Everything in here will be extra wide. Tables, text, everything!
+					Beware though, CSS columns can behave a bit weird sometimes. You may
+					have to manually place column breaks with \`\column\` to make the
+					surrounding text flow with this wide block the way you want.
+					}}
+					\n`
+			},
+			{
+				name : 'QR Code',
+				icon : 'fas fa-qrcode',
+				gen  : (brew)=>{
+					return `![]` +
+							`(https://api.qrserver.com/v1/create-qr-code/?data=` +
+							`https://homebrewery.naturalcrit.com${brew.shareId ? `/share/${brew.shareId}` : ''}` +
+							`&size=100x100) {width:100px;mix-blend-mode:multiply}`;
+				}
+			},
+			{
+				name : 'Page Number',
+				icon : 'fas fa-bookmark',
+				gen  : '{{pageNumber 1}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
+			},
+			{
+				name : 'Auto-incrementing Page Number',
+				icon : 'fas fa-sort-numeric-down',
+				gen  : '{{pageNumber,auto}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
+			},
+			{
+				name : 'Link to page',
+				icon : 'fas fa-link',
+				gen  : '[Click here](#p3) to go to page 3\n'
+			},
+			{
+				name : 'Table of Contents',
+				icon : 'fas fa-book',
+				gen  : TableOfContentsGen
+			},
+			{
+				name : 'Add Comment',
+				icon : 'fas fa-code',
+				gen  : '<!-- This is a comment that will not be rendered into your brew. Hotkey (Ctrl/Cmd + /). -->'
+			},
+		]
+	},
+	{
+		groupName : 'Style Editor',
+		icon      : 'fas fa-pencil-alt',
+		view      : 'style',
+		snippets  : [
+			{
+				name : 'Remove Drop Cap',
+				icon : 'fas fa-remove-format',
+				gen  : dedent`/* Removes Drop Caps */
+						.page h1+p:first-letter {
+							all: unset;
+						}\n\n`
+			},
+			{
+				name : 'Tweak Drop Cap',
+				icon : 'fas fa-sliders-h',
+				gen  : dedent`/* Drop Cap settings */
+						.page h1 + p::first-letter {
+							font-family: SolberaImitationRemake;
+							font-size: 3.5cm;
+							background-image: linear-gradient(-45deg, #322814, #998250, #322814);
+							line-height: 1em;
+						}\n\n`
+			},
+			{
+				name : 'Add Comment',
+				icon : 'fas fa-code',
+				gen  : '/* This is a comment that will not be rendered into your brew. */'
+			},
+		]
+	},
+
+	/*********************** IMAGES *******************/
+	{
+		groupName : 'Images',
+		icon      : 'fas fa-images',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Image',
+				icon : 'fas fa-image',
+				gen  : dedent`
+					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}
+
+					{{artist,position:relative,top:-230px,left:10px,margin-bottom:-30px
+					##### Cat Warrior
+					[Kyoung Hwan Kim](https://www.artstation.com/tahra)
+					}}`
+			},
+			{
+				name : 'Background Image',
+				icon : 'fas fa-tree',
+				gen  : dedent`
+					![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}
+
+					{{artist,top:80px,right:30px
+					##### Homebrew Mug
+					[naturalcrit](https://homebrew.naturalcrit.com)
+					}}`
+			},
+			{
+				name : 'Watercolor Splatter',
+				icon : 'fas fa-fill-drip',
+				gen  : watercolorGen,
+			},
+			{
+				name : 'Watermark',
+				icon : 'fas fa-id-card',
+				gen  : dedent`
+				{{watermark Homebrewery}}\n`
+			},
+		]
+	},
+
+
+	/************************* PHB ********************/
+
+	{
+		groupName : 'PHB',
+		icon      : 'fas fa-book',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Spell',
+				icon : 'fas fa-magic',
+				gen  : MagicGen.spell,
+			},
+			{
+				name : 'Spell List',
+				icon : 'fas fa-scroll',
+				gen  : MagicGen.spellList,
+			},
+			{
+				name : 'Class Feature',
+				icon : 'fas fa-mask',
+				gen  : ClassFeatureGen,
+			},
+			{
+				name : 'Note',
+				icon : 'fas fa-sticky-note',
+				gen  : function(){
+					return dedent`
+						{{note
+						##### Time to Drop Knowledge
+						Use notes to point out some interesting information.
+
+						**Tables and lists** both work within a note.
+						}}
+						\n`;
+				},
+			},
+			{
+				name : 'Descriptive Text Box',
+				icon : 'fas fa-comment-alt',
+				gen  : function(){
+					return dedent`
+						{{descriptive
+						##### Time to Drop Knowledge
+						Use descriptive boxes to highlight text that should be read aloud.
+
+						**Tables and lists** both work within a descriptive box.
+						}}
+						\n`;
+				},
+			},
+			{
+				name : 'Monster Stat Block (unframed)',
+				icon : 'fas fa-paw',
+				gen  : MonsterBlockGen.monster('monster', 2),
+			},
+			{
+				name : 'Monster Stat Block',
+				icon : 'fas fa-spider',
+				gen  : MonsterBlockGen.monster('monster,frame', 2),
+			},
+			{
+				name : 'Wide Monster Stat Block',
+				icon : 'fas fa-dragon',
+				gen  : MonsterBlockGen.monster('monster,frame,wide', 4),
+			},
+			{
+				name : 'Cover Page',
+				icon : 'fas fa-file-word',
+				gen  : CoverPageGen,
+			},
+			{
+				name : 'Magic Item',
+				icon : 'fas fa-hat-wizard',
+				gen  : MagicGen.item,
+			},
+			{
+				name : 'Artist Credit',
+				icon : 'fas fa-signature',
+				gen  : function(){
+					return dedent`
+						{{artist,top:90px,right:30px
+						##### Starry Night
+						[Van Gogh](https://www.vangoghmuseum.nl/en)
+						}}
+						\n`;
+				},
+			},
+		]
+	},
+
+
+
+	/*********************  TABLES *********************/
+
+	{
+		groupName : 'Tables',
+		icon      : 'fas fa-table',
+		view      : 'text',
+		snippets  : [
+			{
+				name : 'Table',
+				icon : 'fas fa-th-list',
+				gen  : function(){
+					return dedent`
+						##### Character Advancement
+						| Experience Points | Level | Proficiency Bonus |
+						|:------------------|:-----:|:-----------------:|
+						| 0                 | 1     | +2                |
+						| 300               | 2     | +2                |
+						| 900               | 3     | +2                |
+						| 2,700             | 4     | +2                |
+						| 6,500             | 5     | +3                |
+						| 14,000            | 6     | +3                |
+						\n`;
+				}
+			},
+			{
+				name : 'Wide Table',
+				icon : 'fas fa-list',
+				gen  : function(){
+					return dedent`
+						{{wide
+						##### Weapons
+						| Name                    | Cost  | Damage          | Weight  | Properties |
+						|:------------------------|:-----:|:----------------|--------:|:-----------|
+						| *Simple Melee Weapons*  |       |                 |         |            |
+						| &emsp; Club             | 1 sp  | 1d4 bludgeoning | 2 lb.   | Light      |
+						| &emsp; Dagger           | 2 gp  | 1d4 piercing    | 1 lb.   | Finesse    |
+						| &emsp; Spear            | 1 gp  | 1d6 piercing    | 3 lb.   | Thrown     |
+						| *Simple Ranged Weapons* |       |                 |         |            |
+						| &emsp; Dart             | 5 cp  | 1d4 piercig     | 1/4 lb. | Finesse    |
+						| &emsp; Shortbow         | 25 gp | 1d6 piercing    | 2 lb.   | Ammunition |
+						| &emsp; Sling            | 1 sp  | 1d4 bludgeoning | &mdash; | Ammunition |
+						}}
+						\n`;
+				}
+			},
+			{
+				name : 'Split Table',
+				icon : 'fas fa-th-large',
+				gen  : function(){
+					return dedent`
+						##### Typical Difficulty Classes
+						{{column-count:2
+						| Task Difficulty | DC |
+						|:----------------|:--:|
+						| Very easy       | 5  |
+						| Easy            | 10 |
+						| Medium          | 15 |
+
+						| Task Difficulty   | DC |
+						|:------------------|:--:|
+						| Hard              | 20 |
+						| Very hard         | 25 |
+						| Nearly impossible | 30 |
+						}}
+						\n`;
+				}
+			},
+			{
+				name : 'Class Table',
+				icon : 'fas fa-table',
+				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
+			},
+			{
+				name : 'Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.full('classTable,wide'),
+			},
+			{
+				name : '1/2 Class Table',
+				icon : 'fas fa-list-alt',
+				gen  : ClassTableGen.half('classTable,decoration,frame'),
+			},
+			{
+				name : '1/2 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.half('classTable'),
+			},
+			{
+				name : '1/3 Class Table',
+				icon : 'fas fa-border-all',
+				gen  : ClassTableGen.third('classTable,frame'),
+			},
+			{
+				name : '1/3 Class Table (unframed)',
+				icon : 'fas fa-border-none',
+				gen  : ClassTableGen.third('classTable'),
+			}
+		]
+	},
+
+
+
+
+	/**************** PAGE *************/
+
+	{
+		groupName : 'Print',
+		icon      : 'fas fa-print',
+		view      : 'style',
+		snippets  : [
+			{
+				name : 'A4 Page Size',
+				icon : 'far fa-file',
+				gen  : dedent`/* A4 Page Size */
+					.page{
+						width  : 210mm;
+						height : 296.8mm;
+					}\n\n`
+			},
+			{
+				name : 'Square Page Size',
+				icon : 'far fa-file',
+				gen  : dedent`/* Square Page Size */
+					.page {
+						width   : 125mm;
+						height  : 125mm;
+						padding : 12.5mm;
+						columns : unset;
+					}\n\n`
+			},
+			{
+				name : 'Ink Friendly',
+				icon : 'fas fa-tint',
+				gen  : dedent`
+					/* Ink Friendly */
+					*:is(.page,.monster,.note,.descriptive) {
+						background : white !important;
+						filter : drop-shadow(0px 0px 3px #888) !important;
+					}
+
+					.page img {
+						visibility : hidden;
+					}\n\n`
+			},
+		]
+	},
+
+];

client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js

@@ -0,0 +1,84 @@
+const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
+
+const getTOC = (pages)=>{
+	const add1 = (title, page)=>{
+		res.push({
+			title    : title,
+			page     : page + 1,
+			children : []
+		});
+	};
+	const add2 = (title, page)=>{
+		if(!_.last(res)) add1(null, page);
+		_.last(res).children.push({
+			title    : title,
+			page     : page + 1,
+			children : []
+		});
+	};
+	const add3 = (title, page)=>{
+		if(!_.last(res)) add1(null, page);
+		if(!_.last(_.last(res).children)) add2(null, page);
+		_.last(_.last(res).children).children.push({
+			title    : title,
+			page     : page + 1,
+			children : []
+		});
+	};
+
+	const res = [];
+	_.each(pages, (page, pageNum)=>{
+		const lines = page.split('\n');
+		_.each(lines, (line)=>{
+			if(_.startsWith(line, '# ')){
+				const title = line.replace('# ', '');
+				add1(title, pageNum);
+			}
+			if(_.startsWith(line, '## ')){
+				const title = line.replace('## ', '');
+				add2(title, pageNum);
+			}
+			if(_.startsWith(line, '### ')){
+				const title = line.replace('### ', '');
+				add3(title, pageNum);
+			}
+		});
+	});
+	return res;
+};
+
+module.exports = function(brew){
+	const pages = brew.text.split('\\page');
+	const TOC = getTOC(pages);
+	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
+		if(g1.title !== null) {
+			r.push(`- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
+		}
+		if(g1.children.length){
+			_.each(g1.children, (g2, idx2)=>{
+				if(g2.title !== null) {
+					r.push(`  - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
+				}
+				if(g2.children.length){
+					_.each(g2.children, (g3, idx3)=>{
+						if(g2.title !== null) {
+							r.push(`    - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+						} else { // Don't over-indent if no level-2 parent entry
+							r.push(`  - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
+						}
+					});
+				}
+			});
+		}
+		return r;
+	}, []).join('\n');
+
+	return dedent`
+		{{toc,wide
+		# Table Of Contents
+
+		${markdown}
+		}}
+		\n`;
+};

client/homebrew/editor/snippetbar/snippetsLegacy/classfeature.gen.js

@@ -8,7 +8,6 @@ module.exports = function(classname){
 	classname = classname.toLowerCase();
 
 	const hitDie = _.sample([4, 6, 8, 10, 12]);
-	const spellSkill = _.sample(['Wisdom', 'Charisma', 'Intelligence']);
 
 	const abilityList = ['Strength', 'Dexerity', 'Constitution', 'Wisdom', 'Charisma', 'Intelligence'];
 	const skillList = ['Acrobatics ', 'Animal Handling', 'Arcana', 'Athletics', 'Deception', 'History', 'Insight', 'Intimidation', 'Investigation', 'Medicine', 'Nature', 'Perception', 'Performance', 'Persuasion', 'Religion', 'Sleight of Hand', 'Stealth', 'Survival'];
@@ -27,21 +26,12 @@ module.exports = function(classname){
 		'___',
 		`- **Armor:** ${_.sampleSize(['Light armor', 'Medium armor', 'Heavy armor', 'Shields'], _.random(0, 3)).join(', ') || 'None'}`,
 		`- **Weapons:** ${_.sampleSize(['Squeegee', 'Rubber Chicken', 'Simple weapons', 'Martial weapons'], _.random(0, 2)).join(', ') || 'None'}`,
-		`- **Tools:** ${_.sampleSize(['Artisan\'s tools', 'one musical instrument', 'Thieves\' tools'], _.random(0, 2)).join(', ') || 'None'}`,
+		`- **Tools:** ${_.sampleSize(['Artian\'s tools', 'one musical instrument', 'Thieve\'s tools'], _.random(0, 2)).join(', ') || 'None'}`,
 		'',
 		'___',
 		`- **Saving Throws:** ${_.sampleSize(abilityList, 2).join(', ')}`,
 		`- **Skills:** Choose two from ${_.sampleSize(skillList, _.random(4, 6)).join(', ')}`,
 		'',
-		'#### Spellcasting Ability',
-		'',
-		`<div style=text-align:center>`,
-		'___',
-		`- **Spell save DC** = ${_.sample([6, 8, 10])} + your proficiency bonus + your ${spellSkill} modifier`,
-		'',
-		`- **Spell attack modifier** = your proficiency bonus + your ${spellSkill} modifier`,
-		`</div>`,
-		'',
 		'#### Equipment',
 		'You start with the following equipment, in addition to the equipment granted by your background:',
 		'- *(a)* a martial weapon and a shield or *(b)* two martial weapons',

client/homebrew/editor/snippetbar/snippetsLegacy/snippets.js

@@ -1,12 +1,12 @@
 /* eslint-disable max-lines */
 
-const MagicGen           = require('./snippets/magic.gen.js');
-const ClassTableGen      = require('./snippets/classtable.gen.js');
-const MonsterBlockGen    = require('./snippets/monsterblock.gen.js');
-const ClassFeatureGen    = require('./snippets/classfeature.gen.js');
-const CoverPageGen       = require('./snippets/coverpage.gen.js');
-const TableOfContentsGen = require('./snippets/tableOfContents.gen.js');
-const dedent             = require('dedent-tabs').default;
+const MagicGen = require('./magic.gen.js');
+const ClassTableGen = require('./classtable.gen.js');
+const MonsterBlockGen = require('./monsterblock.gen.js');
+const ClassFeatureGen = require('./classfeature.gen.js');
+const CoverPageGen = require('./coverpage.gen.js');
+const TableOfContentsGen = require('./tableOfContents.gen.js');
+const dedent = require('dedent-tabs').default;
 
 module.exports = [
 

client/homebrew/editor/snippetbar/snippetsLegacy/tableOfContents.gen.js

@@ -47,8 +47,8 @@ const getTOC = (pages)=>{
 	return res;
 };
 
-module.exports = function(props){
-	const pages = props.brew.text.split('\\page');
+module.exports = function(brew){
+	const pages = brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);

client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx

@@ -1,149 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-
-const StringArrayEditor = createClass({
-	displayName     : 'StringArrayEditor',
-	getDefaultProps : function() {
-		return {
-			label         : '',
-			values        : [],
-			valuePatterns : null,
-			validators    : [],
-			placeholder   : '',
-			notes         : [],
-			unique        : false,
-			cannotEdit    : [],
-			onChange      : ()=>{}
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			valueContext : !!this.props.values ? this.props.values.map((value)=>({
-				value,
-				editing : false
-			})) : [],
-			temporaryValue : '',
-			updateValue    : ''
-		};
-	},
-
-	componentDidUpdate : function(prevProps) {
-		if(!_.eq(this.props.values, prevProps.values)) {
-			this.setState({
-				valueContext : this.props.values ? this.props.values.map((newValue)=>({
-					value   : newValue,
-					editing : this.state.valueContext.find(({ value })=>value === newValue)?.editing || false
-				})) : []
-			});
-		}
-	},
-
-	handleChange : function(value) {
-		this.props.onChange({
-			target : {
-				value
-			}
-		});
-	},
-
-	addValue : function(value){
-		this.handleChange(_.uniq([...this.props.values, value]));
-		this.setState({
-			temporaryValue : ''
-		});
-	},
-
-	removeValue : function(index){
-		this.handleChange(this.props.values.filter((_, i)=>i !== index));
-	},
-
-	updateValue : function(value, index){
-		const valueContext = this.state.valueContext;
-		valueContext[index].value = value;
-		valueContext[index].editing = false;
-		this.handleChange(valueContext.map((context)=>context.value));
-		this.setState({ valueContext, updateValue: '' });
-	},
-
-	editValue : function(index){
-		if(!!this.props.cannotEdit && this.props.cannotEdit.includes(this.props.values[index])) {
-			return;
-		}
-		const valueContext = this.state.valueContext.map((context, i)=>{
-			context.editing = index === i;
-			return context;
-		});
-		this.setState({ valueContext, updateValue: this.props.values[index] });
-	},
-
-	valueIsValid : function(value, index) {
-		const values = _.clone(this.props.values);
-		if(index !== undefined) {
-			values.splice(index, 1);
-		}
-		const matchesPatterns = !this.props.valuePatterns || this.props.valuePatterns.some((pattern)=>!!(value || '').match(pattern));
-		const uniqueIfSet = !this.props.unique || !values.includes(value);
-		const passesValidators = !this.props.validators || this.props.validators.every((validator)=>validator(value));
-		return matchesPatterns && uniqueIfSet && passesValidators;
-	},
-
-	handleValueInputKeyDown : function(event, index) {
-		if(event.key === 'Enter') {
-			if(this.valueIsValid(event.target.value, index)) {
-				if(index !== undefined) {
-					this.updateValue(event.target.value, index);
-				} else {
-					this.addValue(event.target.value);
-				}
-			}
-		} else if(event.key === 'Escape') {
-			this.closeEditInput(index);
-		}
-	},
-
-	closeEditInput : function(index) {
-		const valueContext = this.state.valueContext;
-		valueContext[index].editing = false;
-		this.setState({ valueContext, updateValue: '' });
-	},
-
-	render : function() {
-		const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing
-			? <React.Fragment key={i}>
-				<div className='input-group'>
-					<input type='text' className={`value ${this.valueIsValid(this.state.updateValue, i) ? '' : 'invalid'}`} autoFocus placeholder={this.props.placeholder}
-						value={this.state.updateValue}
-						onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)}
-						onChange={(e)=>this.setState({ updateValue: e.target.value })}/>
-					{<div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.closeEditInput(i); }}><i className='fa fa-undo fa-fw'/></div>}
-					{this.valueIsValid(this.state.updateValue, i) ? <div className='icon steel'  onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}><i className='fa fa-check fa-fw'/></div> : null}
-				</div>
-			</React.Fragment>
-			: <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value}
-				{!!this.props.cannotEdit && this.props.cannotEdit.includes(context.value) ? null : <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.removeValue(i); }}><i className='fa fa-times fa-fw'/></div>}
-			</div>
-		);
-
-		return <div className='field'>
-			<label>{this.props.label}</label>
-			<div style={{ flex: '1 0' }} className='value'>
-				<div className='list'>
-					{valueElements}
-					<div className='input-group'>
-						<input type='text' className={`value ${this.valueIsValid(this.state.temporaryValue) ? '' : 'invalid'}`} placeholder={this.props.placeholder}
-							   value={this.state.temporaryValue}
-							   onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
-							   onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/>
-						{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}><i className='fa fa-check fa-fw'/></div> : null}
-					</div>
-				</div>
-
-				{this.props.notes ? this.props.notes.map((n, index)=><p key={index}><small>{n}</small></p>) : null}
-			</div>
-		</div>;
-	}
-});
-
-module.exports = StringArrayEditor;

client/homebrew/googleDrive.svg

@@ -1,8 +0,0 @@
-<svg viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
-	<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
-	<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
-	<path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
-	<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
-	<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
-	<path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
-</svg>

client/homebrew/homebrew.jsx

@@ -1,34 +1,16 @@
 require('./homebrew.less');
 const React = require('react');
 const createClass = require('create-react-class');
-const { StaticRouter:Router } = require('react-router-dom/server');
-const { Route, Routes, useParams, useSearchParams } = require('react-router-dom');
+const { StaticRouter:Router, Switch, Route } = require('react-router-dom');
+const queryString = require('query-string');
 
 const HomePage = require('./pages/homePage/homePage.jsx');
 const EditPage = require('./pages/editPage/editPage.jsx');
 const UserPage = require('./pages/userPage/userPage.jsx');
 const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
-const ErrorPage = require('./pages/errorPage/errorPage.jsx');
-const VaultPage = require('./pages/vaultPage/vaultPage.jsx');
-const AccountPage = require('./pages/accountPage/accountPage.jsx');
-
-const WithRoute = (props)=>{
-	const params = useParams();
-	const [searchParams] = useSearchParams();
-	const queryParams = {};
-	for (const [key, value] of searchParams?.entries() || []) {
-		queryParams[key] = value;
-	}
-	const Element = props.el;
-	const allProps = {
-		...props,
-		...params,
-		query : queryParams,
-		el    : undefined
-	};
-	return <Element {...allProps} />;
-};
+//const ErrorPage = require('./pages/errorPage/errorPage.jsx');
+const PrintPage = require('./pages/printPage/printPage.jsx');
 
 const Homebrew = createClass({
 	displayName     : 'Homebrewery',
@@ -47,45 +29,46 @@ const Homebrew = createClass({
 				editId    : null,
 				createdAt : null,
 				updatedAt : null,
-				lang      : ''
 			}
 		};
 	},
-
-	getInitialState : function() {
+	componentWillMount : function() {
 		global.account = this.props.account;
 		global.version = this.props.version;
 		global.enable_v3 = this.props.enable_v3;
-		global.enable_themes = this.props.enable_themes;
-		global.config = this.props.config;
-
-		return {};
 	},
-
 	render : function (){
 		return (
 			<Router location={this.props.url}>
 				<div className='homebrew'>
-					<Routes>
-						<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
-						<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
-						<Route path='/new' element={<WithRoute el={NewPage} userThemes={this.props.userThemes}/> } />
-						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
-						<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
-						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
-						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
-						<Route path='/migrate' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
-						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} accountDetails={this.props.brew.accountDetails} />} />
-						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/error' element={<WithRoute el={ErrorPage} brew={this.props.brew} />} />
-						<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					</Routes>
+					<Switch>
+						<Route path='/edit/:id' component={(routeProps)=><EditPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+						<Route path='/share/:id' component={(routeProps)=><SharePage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+						<Route path='/new/:id' component={(routeProps)=><NewPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
+						<Route path='/new' exact component={(routeProps)=><NewPage />}/>
+						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} />}/>
+						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} />}/>
+						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} />}/>
+						<Route path='/changelog' exact component={()=><SharePage brew={this.props.brew} />}/>
+						<Route path='/faq' exact component={()=><SharePage brew={this.props.brew} />}/>
+						<Route path='/v3_preview' exact component={()=><HomePage brew={this.props.brew} />}/>
+						<Route path='/' component={()=><HomePage brew={this.props.brew} />}/>
+					</Switch>
 				</div>
 			</Router>
 		);
 	}
 });
 
-module.exports = Homebrew;
+module.exports = Homebrew;
+
+//TODO: Nicer Error page instead of just "cant get that"
+// 	'/share/:id' : (args)=>{
+// 		if(!this.props.brew.shareId){
+// 			return <ErrorPage errorId={args.id}/>;
+// 		}
+//
+// 		return <SharePage
+// 			id={args.id}
+// 			brew={this.props.brew} />;
+// 	},

client/homebrew/homebrew.less

@@ -6,32 +6,10 @@
 		height           : 100%;
 		background-color : @steel;
 		flex-direction   : column;
-		overflow-y       : hidden;
 		.content{
 			position   : relative;
 			height     : calc(~"100% - 29px"); //Navbar height
 			flex       : auto;
-			overflow-y : hidden;
-		}
-		&.listPage .content {
-			overflow-y : scroll;
-
-			&::-webkit-scrollbar {
-				width: 20px;
-				&:horizontal{
-					height: 20px;
-					width:auto;
-				}
-				&-thumb {
-					background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
-					&:horizontal{
-						background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
-					}
-				}
-				&-corner {
-					visibility: hidden;
-				}
-			}
 		}
 	}
-}
+}

client/homebrew/navbar/account.navitem.jsx

@@ -1,7 +1,6 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const Nav = require('naturalcrit/nav/nav.jsx');
-const request = require('superagent');
 
 const Account = createClass({
 	displayName     : 'AccountNavItem',
@@ -19,92 +18,13 @@ const Account = createClass({
 		}
 	},
 
-	handleLogout : function(){
-		if(confirm('Are you sure you want to log out?')) {
-			// Reset divider position
-			window.localStorage.removeItem('naturalcrit-pane-split');
-			// Clear login cookie
-			let domain = '';
-			if(window.location?.hostname) {
-				let domainArray = window.location.hostname.split('.');
-				if(domainArray.length > 2){
-					domainArray = [''].concat(domainArray.slice(-2));
-				}
-				domain = domainArray.join('.');
-			}
-			document.cookie = `nc_session=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;samesite=lax;${domain ? `domain=${domain}` : ''}`;
-			window.location = '/';
-		}
-	},
-
-	localLogin : async function(){
-		const username = prompt('Enter username:');
-		if(!username) {return;}
-
-		const expiry = new Date;
-		expiry.setFullYear(expiry.getFullYear() + 1);
-
-		const token = await request.post('/local/login')
-				.send({ username })
-				.then((response)=>{
-					return response.body;
-				})
-				.catch((err)=>{
-					console.warn(err);
-				});
-		if(!token) return;
-
-		document.cookie = `nc_session=${token};expires=${expiry};path=/;samesite=lax;${window.domain ? `domain=${window.domain}` : ''}`;
-		window.location.reload(true);
-	},
-
 	render : function(){
-		//  Logged in
 		if(global.account){
-			return <Nav.dropdown>
-				<Nav.item
-					className='account username'
-					color='orange'
-					icon='fas fa-user'
-				>
-					{global.account.username}
-				</Nav.item>
-				<Nav.item
-					href={`/user/${encodeURI(global.account.username)}`}
-					color='yellow'
-					icon='fas fa-beer'
-				>
-					brews
-				</Nav.item>
-				<Nav.item
-					className='account'
-					color='orange'
-					icon='fas fa-user'
-					href='/account'
-				>
-					account
-				</Nav.item>
-				<Nav.item
-					className='logout'
-					color='red'
-					icon='fas fa-power-off'
-					onClick={this.handleLogout}
-				>
-					logout
-				</Nav.item>
-			</Nav.dropdown>;
+			return <Nav.item href={`/user/${global.account.username}`} color='yellow' icon='fas fa-user'>
+				{global.account.username}
+			</Nav.item>;
 		}
 
-		//  Logged out
-		//  LOCAL ONLY
-		if(global.config.local) {
-			return <Nav.item color='teal' icon='fas fa-sign-in-alt' onClick={this.localLogin}>
-				login
-			</Nav.item>;
-		};
-
-		// Logged out
-		// Production site
 		return <Nav.item href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`} color='teal' icon='fas fa-sign-in-alt'>
 			login
 		</Nav.item>;

client/homebrew/navbar/editTitle.navitem.jsx

@@ -0,0 +1,34 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const cx = require('classnames');
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_TITLE_LENGTH = 50;
+
+
+const EditTitle = createClass({
+	displayName     : 'EditTitleNavItem',
+	getDefaultProps : function() {
+		return {
+			title    : '',
+			onChange : function(){}
+		};
+	},
+
+	handleChange : function(e){
+		if(e.target.value.length > MAX_TITLE_LENGTH) return;
+		this.props.onChange(e.target.value);
+	},
+	render : function(){
+		return <Nav.item className='editTitle'>
+			<input placeholder='Brew Title' type='text' value={this.props.title} onChange={this.handleChange} />
+
+			<div className={cx('charCount', { 'max': this.props.title.length >= MAX_TITLE_LENGTH })}>
+				{this.props.title.length}/{MAX_TITLE_LENGTH}
+			</div>
+		</Nav.item>;
+	},
+
+});
+
+module.exports = EditTitle;

client/homebrew/navbar/error-navitem.jsx

@@ -1,131 +0,0 @@
-require('./error-navitem.less');
-const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const createClass = require('create-react-class');
-
-const ErrorNavItem = createClass({
-	getDefaultProps : function() {
-		return {
-			error  : '',
-			parent : null
-		};
-	},
-	render : function() {
-		const clearError = ()=>{
-			const state = {
-				error : null
-			};
-			if(this.props.parent.state.isSaving) {
-				state.isSaving = false;
-			}
-			this.props.parent.setState(state);
-		};
-
-		const error       = this.props.error;
-		const response    = error.response;
-		const status      = response.status;
-		const HBErrorCode = response.body?.HBErrorCode;
-		const message     = response.body?.message;
-		let errMsg = '';
-		try {
-			errMsg += `${error.toString()}\n\n`;
-			errMsg += `\`\`\`\n${error.stack}\n`;
-			errMsg += `${JSON.stringify(response.error, null, '  ')}\n\`\`\``;
-			console.log(errMsg);
-		} catch (e){}
-
-		if(status === 409) {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					{message ?? 'Conflict: please refresh to get latest changes'}
-				</div>
-			</Nav.item>;
-		}
-
-		if(status === 412) {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
-				</div>
-			</Nav.item>;
-		}
-
-		if(HBErrorCode === '04') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					You are no longer signed in as an author of
-					this brew! Were you signed out from a different
-					window? Visit our log in page, then try again!
-					<br></br>
-					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-						<div className='confirm'>
-							Sign In
-						</div>
-					</a>
-					<div className='deny'>
-						Not Now
-					</div>
-				</div>
-			</Nav.item>;
-		}
-
-		if(response.body?.errors?.[0].reason == 'storageQuotaExceeded') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-				<div className='errorContainer' onClick={clearError}>
-				Can't save because your Google Drive seems to be full!
-				</div>
-			</Nav.item>;
-		}
-
-		if(response.req.url.match(/^\/api.*Google.*$/m)){
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
-					<br></br>
-					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-						<div className='confirm'>
-							Sign In
-						</div>
-					</a>
-					<div className='deny'>
-						Not Now
-					</div>
-				</div>
-			</Nav.item>;
-		}
-
-		if(HBErrorCode === '09') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like there was a problem retreiving
-					the theme, or a theme that it inherits,
-					for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-						{response.body.brewId}</a> still exists!
-				</div>
-			</Nav.item>;
-		}
-
-		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-			<div className='errorContainer'>
-				Looks like there was a problem saving. <br />
-				Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
-				here
-				</a>.
-			</div>
-		</Nav.item>;
-	}
-});
-
-module.exports = ErrorNavItem;

client/homebrew/navbar/error-navitem.less

@@ -1,78 +0,0 @@
-.navItem.error {
-  position         : relative;
-  background-color : @red;
-}
-
-.errorContainer{
-  animation-name: glideDown;
-  animation-duration: 0.4s;
-  position         : absolute;
-  top              : 100%;
-  left             : 50%;
-  z-index          : 1000;
-  width            : 140px;
-  padding          : 3px;
-  color            : white;
-  background-color : #333;
-  border           : 3px solid #444;
-  border-radius    : 5px;
-  transform        : translate(-50% + 3px, 10px);
-  text-align       : center;
-  font-size        : 10px;
-  font-weight      : 800;
-  text-transform   : uppercase;
-	.lowercase {
-		text-transform : none;
-	}
-  a{
-    color : @teal;
-  }
-  &:before {
-    content: "";
-    width: 0px;
-    height: 0px;
-    position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid #444;
-    left: 53px;
-    top: -23px;
-  }
-  &:after {
-    content: "";
-    width: 0px;
-    height: 0px;
-    position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid #333;
-    left: 53px;
-    top: -19px;
-  }
-  .deny {
-    width            : 48%;
-    margin           : 1px;
-    padding          : 5px;
-    background-color : #333;
-    display          : inline-block;
-    border-left      : 1px solid #666;
-    .animate(background-color);
-    &:hover{
-      background-color : red;
-    }
-  }
-  .confirm {
-    width            : 48%;
-    margin           : 1px;
-    padding          : 5px;
-    background-color : #333;
-    display          : inline-block;
-    color            : white;
-    .animate(background-color);
-    &:hover{
-      background-color : teal;
-    }
-  }
-}

client/homebrew/navbar/help.navitem.jsx

@@ -1,34 +0,0 @@
-const React = require('react');
-const dedent = require('dedent-tabs').default;
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-module.exports = function(props){
-	return <Nav.dropdown>
-		<Nav.item color='grey' icon='fas fa-question-circle'>
-			need help?
-		</Nav.item>
-		<Nav.item color='red' icon='fas fa-fw fa-bug'
-			href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&text=${encodeURIComponent(dedent`
-			- **Browser(s)** :
-			- **Operating System** :  
-			- **Legacy or v3 Renderer** :
-			- **Issue** :  `)}`}
-			newTab={true}
-			rel='noopener noreferrer'>
-			report issue
-		</Nav.item>
-		<Nav.item color='green' icon='fas fa-question-circle'
-			href='/faq'
-			newTab={true}
-			rel='noopener noreferrer'>
-			FAQ
-		</Nav.item>
-		<Nav.item color='blue' icon='fas fa-fw fa-file-import'
-			href='/migrate'
-			newTab={true}
-			rel='noopener noreferrer'>
-			migrate
-		</Nav.item>
-	</Nav.dropdown>;
-};

client/homebrew/navbar/issue.navitem.jsx

@@ -0,0 +1,13 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+module.exports = function(props){
+	return <Nav.item
+		newTab={true}
+		color='red'
+		icon='fas fa-bug'
+		href={`https://www.reddit.com/r/homebrewery/submit?selftext=true&title=${encodeURIComponent('[Issue] Describe Your Issue Here')}`} >
+		report issue
+	</Nav.item>;
+};

client/homebrew/navbar/metadata.navitem.jsx

@@ -1,89 +0,0 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Moment = require('moment');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-
-const MetadataNav = createClass({
-	displayName     : 'MetadataNav',
-	getDefaultProps : function() {
-		return {
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			showMetaWindow : false
-		};
-	},
-
-	componentDidMount : function() {
-	},
-
-	toggleMetaWindow : function(){
-		this.setState((prevProps)=>({
-			showMetaWindow : !prevProps.showMetaWindow
-		}));
-	},
-
-	getAuthors : function(){
-		if(!this.props.brew.authors || this.props.brew.authors.length == 0) return 'No authors';
-		return <>
-			{this.props.brew.authors.map((author, idx, arr)=>{
-				const spacer = arr.length - 1 == idx ? <></> : <span>, </span>;
-				return <span key={idx}><a className='userPageLink' href={`/user/${author}`}>{author}</a>{spacer}</span>;
-			})}
-		</>;
-	},
-
-	getTags : function(){
-		if(!this.props.brew.tags || this.props.brew.tags.length == 0) return 'No tags';
-		return <>
-			{this.props.brew.tags.map((tag, idx)=>{
-				return <span className='tag' key={idx}>{tag}</span>;
-			})}
-		</>;
-	},
-
-	getSystems : function(){
-		if(!this.props.brew.systems || this.props.brew.systems.length == 0) return 'No systems';
-		return this.props.brew.systems.join(', ');
-	},
-
-	renderMetaWindow : function(){
-		return <div className={`window ${this.state.showMetaWindow ? 'active' : 'inactive'}`}>
-			<div className='row'>
-				<h4>Description</h4>
-				<p>{this.props.brew.description || 'No description.'}</p>
-			</div>
-			<div className='row'>
-				<h4>Authors</h4>
-				<p>{this.getAuthors()}</p>
-			</div>
-			<div className='row'>
-				<h4>Tags</h4>
-				<p>{this.getTags()}</p>
-			</div>
-			<div className='row'>
-				<h4>Systems</h4>
-				<p>{this.getSystems()}</p>
-			</div>
-			<div className='row'>
-				<h4>Updated</h4>
-				<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
-			</div>
-		</div>;
-	},
-
-	render : function(){
-		return <Nav.item icon='fas fa-info-circle' color='grey' className='metadata'
-			onClick={()=>this.toggleMetaWindow()}>
-			{this.props.children}
-			{this.renderMetaWindow()}
-		</Nav.item>;
-	}
-
-});
-
-module.exports = MetadataNav;

client/homebrew/navbar/navbar.jsx

@@ -14,10 +14,12 @@ const Navbar = createClass({
 		};
 	},
 
-	getInitialState : function() {
-		return {
-			ver : global.version
-		};
+	componentDidMount : function() {
+		//const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+		this.setState({
+			//showNonChromeWarning : !isChrome,
+			ver : window.version
+		});
 	},
 
 	/*

client/homebrew/navbar/navbar.less

@@ -1,344 +1,141 @@
-@import 'naturalcrit/styles/colors.less';
-
-@navbarHeight : 28px;
-@viewerToolsHeight : 32px;
-
-@keyframes pinkColoring {
-	0% { color : pink; }
-	50% { color : pink; }
-	75% { color : red; }
-	100% { color : pink; }
-}
-
-@keyframes glideDropDown {
-	0% {
-		background-color : #333333;
-		opacity          : 0;
-		transform        : translate(0px, -100%);
-	}
-	100% {
-		background-color : #333333;
-		opacity          : 1;
-		transform        : translate(0px, 0px);
-	}
-}
-
-.homebrew nav {
-	background-color : #333333;
-	.navContent {
-		position        : relative;
-		z-index         : 2;
-		display         : flex;
-		justify-content : space-between;
-	}
-	.navSection {
-		display     : flex;
-		align-items : center;
-		&:last-child .navItem { border-left : 1px solid #666666; }
-
-		&:has(.brewTitle) {
-			flex-grow : 1;
-			min-width : 300px; 
-		}
-	}
-	// "NaturalCrit" logo
-	.navLogo {
-		display         : block;
-		margin-top      : 0px;
-		margin-right    : 8px;
-		margin-left     : 8px;
-		color           : white;
-		text-decoration : none;
-		&:hover {
-			.name { color : @orange; }
-			svg { fill : @orange; }
-		}
-		svg {
-			height       : 13px;
-			margin-right : 0.2em;
-			cursor       : pointer;
-			fill         : white;
-		}
-		span.name {
-			font-family : 'CodeLight';
-			font-size   : 15px;
-			span.crit { font-family : 'CodeBold'; }
-			small {
-				font-family    : 'Open Sans';
-				font-size      : 0.3em;
-				font-weight    : 800;
-				text-transform : uppercase;
-			}
-		}
-	}
-	.navItem {
-		#backgroundColorsHover;
-		.animate(background-color);
-		display          : flex;
-		align-items      : center;
-		justify-content  : center;
-		height           : 100%;
-		padding          : 8px 12px;
-		font-size        : 10px;
-		font-weight      : 800;
-		line-height      : 13px;
-		color            : white;
-		text-decoration  : none;
-		text-transform   : uppercase;
-		cursor           : pointer;
-		background-color : #333333;
-		i {
-			float       : right;
-			margin-left : 5px;
-			font-size   : 13px;
-		}
-		&.patreon {
-			border-right : 1px solid #666666;
-			border-left  : 1px solid #666666;
-			&:hover i { color : red; }
-			i {
-				color              : pink;
-				.animate(color);
-				animation-name     : pinkColoring;
-				animation-duration : 2s;
-			}
-		}
-		&.brewTitle {
-			display          : block;
-			width            : 100%;
-			overflow         : hidden;
-			font-size        : 12px;
-			font-weight      : 800;
-			color            : white;
-			text-align       : center;
-			text-overflow    : ellipsis;
-			text-transform   : initial;	
-			white-space      : nowrap;
-			background-color : transparent;		
-		}
-
-		// "The Homebrewery" logo
-		&.homebrewLogo {
-			.animate(color);
-			font-family : 'CodeBold';
-			font-size   : 12px;
-			color       : white;
-			div {
-				margin-top    : 2px;
-				margin-bottom : -2px;
-			}
-			&:hover { color : @blue; }
-		}
-		&.metadata {
-			position    : relative;
-			display     : flex;
-			flex-grow   : 1;
-			align-items : center;
-			height      : 100%;
-			padding     : 0;
-			i { margin-right : 10px;}
-			.window {
-				position         : absolute;
-				bottom           : 0;
-				left             : 50%;
-				z-index          : -1;
-				display          : flex;
-				flex-flow        : row wrap;
-				align-content    : baseline;
-				justify-content  : flex-start;
-				width            : 440px;
-				max-height       : ~'calc(100vh - 28px)';
-				padding          : 0 10px 5px;
-				margin           : 0 auto;
-				background-color : #333333;
-				border           : 3px solid #444444;
-				border-top       : unset;
-				border-radius    : 0 0 5px 5px;
-				box-shadow       : inset 0 7px 9px -7px #111111;
-				transition       : transform 0.4s, opacity 0.4s;
-				&.active {
-					opacity   : 1;
-					transform : translateX(-50%) translateY(100%);
-				}
-				&.inactive {
-					opacity   : 0;
-					transform : translateX(-50%) translateY(0%);
-				}
-				.row {
-					display   : flex;
-					flex-flow : row wrap;
-					width     : 100%;
-					h4 {
-						box-sizing : border-box;
-						display    : block;
-						flex-basis : 20%;
-						flex-grow  : 1;
-						min-width  : 76px;
-						padding    : 5px 0;
-						color      : #BBBBBB;
-						text-align : center;
-					}
-					p {
-						flex-basis     : 80%;
-						flex-grow      : 1;
-						padding        : 5px 0;
-						font-family    : 'Open Sans', sans-serif;
-						font-size      : 10px;
-						font-weight    : normal;
-						text-transform : initial;
-						.tag {
-							display          : inline-block;
-							padding          : 2px;
-							margin           : 2px 2px;
-							background-color : #444444;
-							border           : 2px solid grey;
-							border-radius    : 5px;
-						}
-						a.userPageLink {
-							color           : white;
-							text-decoration : none;
-							&:hover { text-decoration : underline; }
-						}
-					}
-					&:nth-of-type(even) { background-color : #555555; }
-				}
-			}
-		}
-		&.warning {
-			position         : relative;
-			color            : white;
-			background-color : @orange;
-			&:hover > .dropdown { visibility : visible; }
-			.dropdown {
-				position         : absolute;
-				top              : 28px;
-				left             : 0;
-				z-index          : 10000;
-				box-sizing       : border-box;
-				display          : block;
-				width            : 100%;
-				padding          : 13px 5px;
-				text-align       : center;
-				visibility       : hidden;
-				background-color : #333333;
-			}
-		}
-		&.account {
-			min-width : 100px;
-			&.username { text-transform : none;}
-		}
-	}
-	.navDropdownContainer {
-		position : relative;
-		height   : 100%;
-
-		.navDropdown {
-			position       : absolute;
-			//top: 28px;
-			right          : 0px;
-			z-index        : 10000;
-			display        : flex;
-			flex-direction : column;
-			align-items    : flex-end;
-			width          : max-content;
-			min-width      : 100%;
-			max-height     : calc(100vh - 28px);
-			overflow       : hidden auto;
-			.navItem {
-				position           : relative;
-				display            : flex;
-				align-items        : center;
-				justify-content    : space-between;
-				width              : 100%;
-				border             : 1px solid #888888;
-				border-bottom      : 0;
-				animation-name     : glideDropDown;
-				animation-duration : 0.4s;
-			}
-		}
-		&.recent {
-			position : relative;
-			.navDropdown .navItem {
-				#backgroundColorsHover;
-				.animate(background-color);
-				position         : relative;
-				box-sizing       : border-box;
-				display          : block;
-				max-width        : 15em;
-				max-height       : ~'calc(100vh - 28px)';			
-				padding          : 8px 5px 13px;
-				overflow         : hidden auto;
-				color            : white;
-				text-decoration  : none;
-				scrollbar-color  : #666666 #333333;
-				scrollbar-width  : thin;
-				background-color : #333333;
-				border-top       : 1px solid #888888;
-				.clear {
-					position         : absolute;
-					top              : 50%;
-					right            : 0;
-					display          : none;
-					width            : 20px;
-					height           : 100%;
-					background-color : #333333;
-					border-radius    : 3px;
-					opacity          : 70%;
-					transform        : translateY(-50%);
-					&:hover { opacity : 100%; }
-					i {
-						width      : 100%;
-						height     : 100%;
-						margin     : 0;
-						font-size  : 10px;
-						text-align : center;
-					}
-				}
-				&:hover {
-					background-color : @blue;
-					.clear {
-						display       : grid;
-						place-content : center;
-					}
-				}
-				.title {
-					display       : inline-block;
-					width         : 100%;
-					overflow      : hidden auto;
-					text-overflow : ellipsis;
-					white-space   : nowrap;
-				}
-				.time {
-					position  : absolute;
-					right     : 2px;
-					bottom    : 2px;
-					font-size : 0.7em;
-					color     : #888888;
-				}
-				&.header {
-					box-sizing       : border-box;
-					display          : block;
-					padding          : 5px 0;
-					color            : #BBBBBB;
-					text-align       : center;
-					background-color : #333333;
-					border-top       : 1px solid #888888;
-					&:nth-of-type(1) { background-color : darken(@teal, 20%); }
-					&:nth-of-type(2) { background-color : darken(@purple, 30%); }
-				}
-			}
-		}
-	}
-}
-
-// this should likely be refactored into .navDropdownContainer
-.save-menu {
-	.dropdown { z-index : 1000; }
-	.navItem i.fa-power-off {
-		color : red;
-		&.active {
-			color  : rgb(0, 182, 52);
-			filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
-		}
-	}
-}
+@navbarHeight : 28px;
+@keyframes coloring {
+	//from {color: white;}
+	//to {color: red;}
+	0%   {color: pink;}
+	50%  {color: pink;}
+	75%  {color: red;}
+	100% {color: pink;}
+}
+.homebrew nav{
+	.homebrewLogo{
+		.animate(color);
+		font-family : CodeBold;
+		font-size   : 12px;
+		color       : white;
+		div{
+			margin-top    : 2px;
+			margin-bottom : -2px;
+		}
+		&:hover{
+			color : @blue;
+		}
+	}
+	.editTitle.navItem{
+		padding : 2px 12px;
+		input{
+			width            : 250px;
+			margin           : 0;
+			padding          : 2px;
+			background-color : #444;
+			font-family      : 'Open Sans', sans-serif;
+			font-size        : 12px;
+			font-weight      : 800;
+			color            : white;
+			text-align       : center;
+			border           : 1px solid @blue;
+			outline          : none;
+		}
+		.charCount{
+			display        : inline-block;
+			vertical-align : bottom;
+			margin-left    : 8px;
+			color          : #666;
+			text-align     : right;
+			&.max{
+				color : @red;
+			}
+		}
+	}
+	.brewTitle.navItem{
+		font-size      : 12px;
+		font-weight    : 800;
+		color          : white;
+		text-align     : center;
+		text-transform : initial;
+	}
+	.patreon.navItem{
+		border-left  : 1px solid #666;
+		border-right : 1px solid #666;
+		&:hover i {
+			color: red;
+		}
+		i{
+			.animate(color);
+			animation-name: coloring;
+			animation-duration: 2s;
+			color: pink;
+		}
+	}
+	.recent.navItem{
+		position : relative;
+		.dropdown{
+			position : absolute;
+			top      : 28px;
+			left     : 0px;
+			z-index  : 10000;
+			width    : 100%;
+			h4{
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 5px 0px;
+				background-color : #333;
+				font-size        : 0.8em;
+				color            : #bbb;
+				text-align       : center;
+				border-top       : 1px solid #888;
+				&:nth-of-type(1){ background-color: darken(@teal, 20%); }
+				&:nth-of-type(2){ background-color: darken(@purple, 30%); }
+			}
+			.item{
+				.animate(background-color);
+				position         : relative;
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 13px 5px;
+				background-color : #333;
+				color            : white;
+				text-decoration  : none;
+				border-top       : 1px solid #888;
+				&:hover{
+					background-color : @blue;
+				}
+				.title{
+					display       : inline-block;
+					overflow      : hidden;
+					width         : 100%;
+					text-overflow : ellipsis;
+					white-space   : nowrap;
+				}
+				.time{
+					position  : absolute;
+					right     : 2px;
+					bottom    : 2px;
+					font-size : 0.7em;
+					color     : #888;
+				}
+			}
+		}
+	}
+	.warning.navItem{
+		position         : relative;
+		background-color : @orange;
+		color            : white;
+		&:hover>.dropdown{
+			visibility : visible;
+		}
+		.dropdown{
+			position         : absolute;
+			display          : block;
+			top              : 28px;
+			left             : 0px;
+			visibility       : hidden;
+			z-index          : 10000;
+			box-sizing       : border-box;
+			width            : 100%;
+			padding          : 13px 5px;
+			background-color : #333;
+			text-align       : center;
+		}
+	}
+}

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,64 +1,11 @@
 const React = require('react');
-const _ = require('lodash');
 const Nav = require('naturalcrit/nav/nav.jsx');
-const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
 
-const BREWKEY  = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
-
-const NewBrew = ()=>{
-	const handleFileChange = (e)=>{
-		const file = e.target.files[0];
-		if(file) {
-			const reader = new FileReader();
-			reader.onload = (e)=>{
-				const fileContent = e.target.result;
-				const newBrew = {
-					text  : fileContent,
-					style : ''
-				};
-				if(fileContent.startsWith('```metadata')) {
-					splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
-					localStorage.setItem(BREWKEY, newBrew.text);
-					localStorage.setItem(STYLEKEY, newBrew.style);
-					localStorage.setItem(METAKEY, JSON.stringify(_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
-					window.location.href = '/new';
-				} else {
-					alert('This file is invalid, please, enter a valid file');
-				}
-			};
-			reader.readAsText(file);
-		}
-	};
-
-	return (
-		<Nav.dropdown>
-			<Nav.item
-				className='new'
-				color='purple'
-				icon='fa-solid fa-plus-square'>
-                new
-			</Nav.item>
-			<Nav.item
-				className='fromBlank'
-				href='/new'
-				newTab={true}
-				color='purple'
-				icon='fa-solid fa-file'>
-                from blank
-			</Nav.item>
-
-			<Nav.item
-				className='fromFile'
-				color='purple'
-				icon='fa-solid fa-upload'
-				onClick={()=>{ document.getElementById('uploadTxt').click(); }}>
-				<input id='uploadTxt' className='newFromLocal' type='file' onChange={handleFileChange} style={{ display: 'none' }} />
-                from file
-			</Nav.item>
-		</Nav.dropdown>
-	);
+module.exports = function(props){
+	return <Nav.item
+		href='/new'
+		color='purple'
+		icon='fas fa-plus-square'>
+		new
+	</Nav.item>;
 };
-
-module.exports = NewBrew;

client/homebrew/navbar/print.navitem.jsx

@@ -1,9 +1,9 @@
 const React = require('react');
+const createClass = require('create-react-class');
 const Nav = require('naturalcrit/nav/nav.jsx');
-const { printCurrentBrew } = require('../../../shared/helpers.js');
 
-module.exports = function(){
-	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
+module.exports = function(props){
+	return <Nav.item newTab={true} href={`/print/${props.shareId}?dialog=true`} color='purple' icon='far fa-file-pdf'>
 		get PDF
 	</Nav.item>;
 };

client/homebrew/navbar/recent.navitem.jsx

@@ -36,7 +36,7 @@ const RecentItems = createClass({
 		//== Add current brew to appropriate recent items list (depending on storageKey) ==//
 		if(this.props.storageKey == 'edit'){
 			let editId = this.props.brew.editId;
-			if(this.props.brew.googleId && !this.props.brew.stubbed){
+			if(this.props.brew.googleId){
 				editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 			}
 			edited = _.filter(edited, (brew)=>{
@@ -51,7 +51,7 @@ const RecentItems = createClass({
 		}
 		if(this.props.storageKey == 'view'){
 			let shareId = this.props.brew.shareId;
-			if(this.props.brew.googleId && !this.props.brew.stubbed){
+			if(this.props.brew.googleId){
 				shareId = `${this.props.brew.googleId}${this.props.brew.shareId}`;
 			}
 			viewed = _.filter(viewed, (brew)=>{
@@ -83,7 +83,7 @@ const RecentItems = createClass({
 	 		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
 			if(this.props.storageKey == 'edit') {
 				let prevEditId = prevProps.brew.editId;
-				if(prevProps.brew.googleId && !this.props.brew.stubbed){
+				if(prevProps.brew.googleId){
 					prevEditId = `${prevProps.brew.googleId}${prevProps.brew.editId}`;
 				}
 
@@ -91,7 +91,7 @@ const RecentItems = createClass({
 					return brew.id !== prevEditId;
 				});
 				let editId = this.props.brew.editId;
-				if(this.props.brew.googleId && !this.props.brew.stubbed){
+				if(this.props.brew.googleId){
 					editId = `${this.props.brew.googleId}${this.props.brew.editId}`;
 				}
 				edited.unshift({
@@ -119,58 +119,37 @@ const RecentItems = createClass({
 		});
 	},
 
-	removeItem : function(url, evt){
-		evt.preventDefault();
-		evt.stopPropagation();
-
-		let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
-		let viewed = JSON.parse(localStorage.getItem(VIEW_KEY) || '[]');
-
-		edited = edited.filter((item)=>{ return (item.url !== url);});
-		viewed = viewed.filter((item)=>{ return (item.url !== url);});
-
-		localStorage.setItem(EDIT_KEY, JSON.stringify(edited));
-		localStorage.setItem(VIEW_KEY, JSON.stringify(viewed));
-
-		this.setState({
-			edit : edited,
-			view : viewed
-		});
-
-	},
-
 	renderDropdown : function(){
-		// if(!this.state.showDropdown) return null;
+		if(!this.state.showDropdown) return null;
 
 		const makeItems = (brews)=>{
-			return _.map(brews, (brew, i)=>{
-				return <a className='navItem' href={brew.url} key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
+			return _.map(brews, (brew)=>{
+				return <a href={brew.url} className='item' key={brew.id} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
 					<span className='title'>{brew.title || '[ no title ]'}</span>
 					<span className='time'>{Moment(brew.ts).fromNow()}</span>
-					<div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div>
 				</a>;
 			});
 		};
 
-		return <>
+		return <div className='dropdown'>
 			{(this.props.showEdit && this.props.showView) ?
-				<Nav.item className='header'>edited</Nav.item> : null }
+				<h4>edited</h4> : null }
 			{this.props.showEdit ?
 				makeItems(this.state.edit) : null }
 			{(this.props.showEdit && this.props.showView) ?
-				<Nav.item className='header'>viewed</Nav.item>	: null }
+				<h4>viewed</h4>	: null }
 			{this.props.showView ?
 				makeItems(this.state.view) : null }
-		</>;
+		</div>;
 	},
 
 	render : function(){
-		return <Nav.dropdown className='recent'>
-			<Nav.item icon='fas fa-history' color='grey' >
-				{this.props.text}
-			</Nav.item>
+		return <Nav.item icon='fas fa-history' color='grey' className='recent'
+			onMouseEnter={()=>this.handleDropdown(true)}
+			onMouseLeave={()=>this.handleDropdown(false)}>
+			{this.props.text}
 			{this.renderDropdown()}
-		</Nav.dropdown>;
+		</Nav.item>;
 	}
 
 });

client/homebrew/navbar/reddit.navitem.jsx

@@ -0,0 +1,46 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const cx = require('classnames');
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_URL_SIZE = 2083;
+const MAIN_URL = 'https://www.reddit.com/r/UnearthedArcana/submit?selftext=true';
+
+
+const RedditShare = createClass({
+	displayName     : 'RedditShareNavItem',
+	getDefaultProps : function() {
+		return {
+			brew : {
+				title    : '',
+				sharedId : '',
+				text     : ''
+			}
+		};
+	},
+
+	getText : function(){
+
+	},
+
+
+	handleClick : function(){
+		const url = [
+			MAIN_URL,
+			`title=${encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!')}`,
+			`text=${encodeURIComponent(this.props.brew.text)}`
+		].join('&');
+
+		window.open(url, '_blank');
+	},
+
+
+	render : function(){
+		return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
+			share on reddit
+		</Nav.item>;
+	},
+
+});
+
+module.exports = RedditShare;

client/homebrew/navbar/vault.navitem.jsx

@@ -1,17 +0,0 @@
-const React = require('react');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-
-module.exports = function (props) {
-	return (
-		<Nav.item
-			color='purple'
-			icon='fas fa-dungeon'
-			href='/vault'
-			newTab={false}
-			rel='noopener noreferrer'
-		>
-			Vault
-		</Nav.item>
-	);
-};

client/homebrew/pages/accountPage/accountPage.jsx

@@ -1,82 +0,0 @@
-const React  = require('react');
-const moment = require('moment');
-const UIPage = require('../basePages/uiPage/uiPage.jsx');
-const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
-
-let SAVEKEY = '';
-
-const AccountPage = (props)=>{
-	// destructure props and set state for save location
-	const { accountDetails, brew } = props;
-	const [saveLocation, setSaveLocation] = React.useState('');
-
-	// initialize save location from local storage based on user id
-	React.useEffect(()=>{
-		if(!saveLocation && accountDetails.username) {
-			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${accountDetails.username}`;
-			// if no SAVEKEY in local storage, default save location to Google Drive if user has Google account.
-			let saveLocation = window.localStorage.getItem(SAVEKEY);
-			saveLocation = saveLocation ?? (accountDetails.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
-			setActiveSaveLocation(saveLocation);
-		}
-	}, []);
-
-	const setActiveSaveLocation = (newSelection)=>{
-		if(saveLocation === newSelection) return;
-		window.localStorage.setItem(SAVEKEY, newSelection);
-		setSaveLocation(newSelection);
-	};
-
-	// todo: should this be a set of radio buttons (well styled) since it's either/or choice?
-	const renderSaveLocationButton = (name, key, shouldRender = true)=>{
-		if(!shouldRender) return null;
-		return (
-			<button className={saveLocation === key ? 'active' : ''} onClick={()=>{setActiveSaveLocation(key);}}>
-				{name}
-			</button>
-		);
-	};
-
-	// render the entirety of the account page content
-	const renderAccountPage = ()=>{
-		return (
-			<>
-				<div className='dataGroup'>
-					<h1>Account Information <i className='fas fa-user'></i></h1>
-					<p><strong>Username: </strong>{accountDetails.username || 'No user currently logged in'}</p>
-					<p><strong>Last Login: </strong>{moment(accountDetails.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
-				</div>
-				<div className='dataGroup'>
-					<h3>Homebrewery Information <NaturalCritIcon /></h3>
-					<p><strong>Brews on Homebrewery: </strong>{accountDetails.mongoCount}</p>
-				</div>
-				<div className='dataGroup'>
-					<h3>Google Information <i className='fab fa-google-drive'></i></h3>
-					<p><strong>Linked to Google: </strong>{accountDetails.googleId ? 'YES' : 'NO'}</p>
-					{accountDetails.googleId && (
-						<p>
-							<strong>Brews on Google Drive: </strong>{accountDetails.googleCount ?? (
-								<>
-									Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a>
-								</>
-							)}
-						</p>
-					)}
-				</div>
-				<div className='dataGroup'>
-					<h4>Default Save Location</h4>
-					{renderSaveLocationButton('Homebrewery', 'HOMEBREWERY')}
-					{renderSaveLocationButton('Google Drive', 'GOOGLE-DRIVE', accountDetails.googleId)}
-				</div>
-			</>
-		);
-	};
-
-	// return the account page inside the base layout wrapper (with navbar etc).
-	return (
-		<UIPage brew={brew}>
-			{renderAccountPage()}
-		</UIPage>);
-};
-
-module.exports = AccountPage;

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -1,148 +0,0 @@
-
-.brewItem{
-	position                    : relative;
-	display                     : inline-block;
-	vertical-align              : top;
-	box-sizing                  : border-box;
-	box-sizing                  : border-box;
-	overflow                    : hidden;
-	width                       : 48%;
-	min-height                  : 105px;
-	margin-right                : 15px;
-	margin-bottom               : 15px;
-	padding                     : 5px 15px 2px 6px;
-	padding-right               : 15px;
-	border                      : 1px solid #c9ad6a;
-	border-radius               : 5px;
-	-webkit-column-break-inside : avoid;
-	page-break-inside           : avoid;
-	break-inside                : avoid;
-	box-shadow                  : 0px 4px 5px 0px #333;
-	background-color            : #cab2802e;
-	.thumbnail  {
-		position: absolute;
-		width: 150px;
-		height: 100%;
-		top: 0;
-		right: 0;
-		z-index: -1;
-		background-size: contain;
-		background-repeat: no-repeat;
-		background-position: right top;
-		mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
-		-webkit-mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
-		opacity: 50%;
-	}
-	.text {
-		min-height : 54px;
-		h4{
-			margin-bottom : 5px;
-			font-size     : 2.2em;
-		}
-	}
-	.info{
-		position: initial;
-		bottom: 2px;
-		font-family : ScalySansRemake;
-		font-size   : 1.2em;
-		&>span{
-			margin-right : 12px;
-			line-height  : 1.5em;
-
-			a {
-				color:inherit;
-			}
-		}
-	}
-	.brewTags span {
-		background-color: #c8ac6e3b;
-		margin: 2px;
-		padding: 2px;
-		border: 1px solid #c8ac6e;
-		border-radius: 4px;
-		white-space: nowrap;
-		display: inline-block;
-		font-weight: bold;
-		border-color: currentColor;
-		cursor : pointer;
-		&:before {
-			font-family: 'Font Awesome 5 Free';
-			font-size: 12px;
-			margin-right: 3px;
-		}
-		&.type {
-			background-color: #0080003b;
-			color: #008000;
-			&:before{
-				content: '\f0ad';
-			}
-		}
-		&.group {
-			background-color: #5050503b;
-			color: #000000;
-			&:before{
-				content: '\f500';
-			}
-		}
-		&.meta {
-			background-color: #0000803b;
-			color: #000080;
-			&:before{
-				content: '\f05a';
-			}
-		}
-		&.system {
-			background-color: #8000003b;
-			color: #800000;
-			&:before{
-				content: '\f518';
-			}
-		}
-	}
-	&:hover{
-		.links{
-			opacity : 1;
-		}
-	}
-	&:nth-child(2n + 1){
-		margin-right : 0px;
-	}
-	.links{
-		.animate(opacity);
-		position         : absolute;
-		top              : 0px;
-		right            : 0px;
-		height           : 100%;
-		width            : 2em;
-		opacity          : 0;
-		background-color : fade(black, 60%);
-		text-align       : center;
-		a{
-			.animate(opacity);
-			display         : block;
-			margin          : 8px 0px;
-			opacity         : 0.6;
-			font-size       : 1.3em;
-			color           : white;
-			text-decoration : unset;
-			&:hover{
-				opacity : 1;
-			}
-			i{
-				cursor : pointer;
-			}
-		}
-	}
-	.googleDriveIcon {
-		height	: 18px;
-		padding : 0px;
-		margin  : -5px;
-	}
-	.homebreweryIcon {
-		mix-blend-mode : darken;
-		height         : 24px;
-		position       : relative;
-		top            : 5px;
-		left           : -5px;
-	}
-}

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -1,280 +0,0 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./listPage.less');
-const React       = require('react');
-const createClass = require('create-react-class');
-const _           = require('lodash');
-const moment      = require('moment');
-
-const BrewItem    = require('./brewItem/brewItem.jsx');
-
-const USERPAGE_KEY_PREFIX = 'HOMEBREWERY-LISTPAGE';
-
-const DEFAULT_SORT_TYPE = 'alpha';
-const DEFAULT_SORT_DIR = 'asc';
-
-const ListPage = createClass({
-	displayName     : 'ListPage',
-	getDefaultProps : function() {
-		return {
-			brewCollection : [
-				{
-					title : '',
-					class : '',
-					brews : []
-				}
-			],
-			navItems    : <></>,
-			reportError : null
-		};
-	},
-	getInitialState : function() {
-		// HIDE ALL GROUPS UNTIL LOADED
-		const brewCollection = this.props.brewCollection.map((brewGroup)=>{
-			brewGroup.visible = false;
-			return brewGroup;
-		});
-
-		return {
-			filterString   : this.props.query?.filter || '',
-			filterTags     : [],
-			sortType       : this.props.query?.sort || null,
-			sortDir        : this.props.query?.dir || null,
-			query          : this.props.query,
-			brewCollection : brewCollection
-		};
-	},
-
-	componentDidMount : function() {
-		// SAVE TO LOCAL STORAGE WHEN LEAVING PAGE
-		window.onbeforeunload = this.saveToLocalStorage;
-
-		// LOAD FROM LOCAL STORAGE
-		if(typeof window !== 'undefined') {
-			const newSortType = (this.state.sortType ?? (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-SORTTYPE`) || DEFAULT_SORT_TYPE));
-			const newSortDir = (this.state.sortDir ?? (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-SORTDIR`) || DEFAULT_SORT_DIR));
-			this.updateUrl(this.state.filterString, newSortType, newSortDir);
-
-			const brewCollection = this.props.brewCollection.map((brewGroup)=>{
-				brewGroup.visible = (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-VISIBILITY-${brewGroup.class}`) ?? 'true')=='true';
-				return brewGroup;
-			});
-
-			this.setState({
-				brewCollection : brewCollection,
-				sortType       : newSortType,
-				sortDir        : newSortDir
-			});
-		};
-	},
-
-	componentWillUnmount : function() {
-		window.onbeforeunload = function(){};
-	},
-
-	saveToLocalStorage : function() {
-		this.state.brewCollection.map((brewGroup)=>{
-			localStorage.setItem(`${USERPAGE_KEY_PREFIX}-VISIBILITY-${brewGroup.class}`, `${brewGroup.visible}`);
-		});
-		localStorage.setItem(`${USERPAGE_KEY_PREFIX}-SORTTYPE`, this.state.sortType);
-		localStorage.setItem(`${USERPAGE_KEY_PREFIX}-SORTDIR`, this.state.sortDir);
-	},
-
-	renderBrews : function(brews){
-		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
-
-		return _.map(brews, (brew, idx)=>{
-			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError} updateListFilter={ (tag)=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
-		});
-	},
-
-	sortBrewOrder : function(brew){
-		if(!brew.title){brew.title = 'No Title';}
-		const mapping = {
-			'alpha'   : _.deburr(brew.title.trim().toLowerCase()),
-			'created' : moment(brew.createdAt).format(),
-			'updated' : moment(brew.updatedAt).format(),
-			'views'   : brew.views,
-			'latest'  : moment(brew.lastViewed).format()
-		};
-		return mapping[this.state.sortType];
-	},
-
-	handleSortOptionChange : function(event){
-		this.updateUrl(this.state.filterString, event.target.value, this.state.sortDir);
-		this.setState({
-			sortType : event.target.value
-		});
-	},
-
-	handleSortDirChange : function(event){
-		const newDir = this.state.sortDir == 'asc' ? 'desc' : 'asc';
-
-		this.updateUrl(this.state.filterString, this.state.sortType, newDir);
-		this.setState({
-			sortDir : newDir
-		});
-	},
-
-	renderSortOption : function(sortTitle, sortValue){
-		return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}>
-			<button
-				value={`${sortValue}`}
-				onClick={this.state.sortType == sortValue ? this.handleSortDirChange : this.handleSortOptionChange}
-			>
-				{`${sortTitle}`}
-			</button>
-			{this.state.sortType == sortValue &&
-				<i className={`sortDir fas ${this.state.sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>
-			}
-		  </div>;
-	},
-
-	handleFilterTextChange : function(e){
-		this.setState({
-			filterString : e.target.value,
-		});
-		this.updateUrl(e.target.value, this.state.sortType, this.state.sortDir);
-		return;
-	},
-
-	updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
-		const url = new URL(window.location.href);
-		const urlParams = new URLSearchParams(url.search);
-
-		urlParams.set('sort', sortType);
-		urlParams.set('dir', sortDir);
-
-		let filterTags = urlParams.getAll('tag');
-		if(filterTag != '') {
-			if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){
-				filterTags.push(filterTag);
-			} else {
-				filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); });
-			}
-		}
-		urlParams.delete('tag');
-		// Add tags to URL in the order they were clicked
-		filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
-		// Sort tags before updating state
-		filterTags.sort((a, b)=>{
-			return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
-		});
-
-		this.setState({
-			filterTags
-		});
-
-		if(!filterTerm)
-			urlParams.delete('filter');
-		else
-			urlParams.set('filter', filterTerm);
-
-		url.search = urlParams;
-		window.history.replaceState(null, null, url);
-	},
-
-	renderFilterOption : function(){
-		return <div className='filter-option'>
-			<label>
-				<i className='fas fa-search'></i>
-				<input
-					type='search'
-					placeholder='filter title/description'
-					onChange={this.handleFilterTextChange}
-					value={this.state.filterString}
-				/>
-			</label>
-		</div>;
-	},
-
-	renderTagsOptions : function(){
-		if(this.state.filterTags?.length == 0) return;
-		return <div className='tags-container'>
-			{_.map(this.state.filterTags, (tag, idx)=>{
-				const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-				return <span key={idx} className={matches[1]} onClick={()=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}>{matches[2]}</span>;
-			})}
-		</div>;
-	},
-
-	renderSortOptions : function(){
-		return <div className='sort-container'>
-			<h6>Sort by :</h6>
-			{this.renderSortOption('Title', 'alpha')}
-			{this.renderSortOption('Created Date', 'created')}
-			{this.renderSortOption('Updated Date', 'updated')}
-			{this.renderSortOption('Views', 'views')}
-			{/* {this.renderSortOption('Latest', 'latest')} */}
-
-			{this.renderFilterOption()}
-		</div>;
-	},
-
-	getSortedBrews : function(brews){
-		const testString = _.deburr(this.state.filterString).toLowerCase();
-
-		brews = _.filter(brews, (brew)=>{
-			// Filter by user entered text
-			const brewStrings = _.deburr([
-				brew.title,
-				brew.description,
-				brew.tags].join('\n')
-				.toLowerCase());
-
-			const filterTextTest = brewStrings.includes(testString);
-
-			// Filter by user selected tags
-			let filterTagTest = true;
-			if(this.state.filterTags.length > 0){
-				filterTagTest = Array.isArray(brew.tags) && this.state.filterTags?.every((tag)=>{
-					return brew.tags.findIndex((brewTag)=>{
-						return brewTag.toLowerCase() == tag.toLowerCase();
-					}) >= 0;
-				});
-			}
-
-			return filterTextTest && filterTagTest;
-		});
-
-		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
-	},
-
-	toggleBrewCollectionState : function(brewGroupClass) {
-		this.setState((prevState)=>({
-			brewCollection : prevState.brewCollection.map(
-				(brewGroup)=>brewGroup.class === brewGroupClass ? { ...brewGroup, visible: !brewGroup.visible } : brewGroup
-			)
-		}));
-	},
-
-	renderBrewCollection : function(brewCollection){
-		if(brewCollection == []) return <div className='brewCollection'>
-			<h1>No Brews</h1>
-		</div>;
-		return _.map(brewCollection, (brewGroup, idx)=>{
-			return <div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
-				<h1 className={brewGroup.visible ? 'active' : 'inactive'} onClick={()=>{this.toggleBrewCollectionState(brewGroup.class);}}>{brewGroup.title || 'No Title'}</h1>
-				{brewGroup.visible ? this.renderBrews(this.getSortedBrews(brewGroup.brews)) : <></>}
-			</div>;
-		});
-	},
-
-	render : function(){
-		return <div className='listPage sitePage'>
-			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
-			<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet'/>
-			<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet'/>
-			{this.props.navItems}
-			{this.renderSortOptions()}
-			{this.renderTagsOptions()}
-
-			<div className='content V3'>
-				<div className='page'>
-					{this.renderBrewCollection(this.state.brewCollection)}
-				</div>
-			</div>
-		</div>;
-	}
-});
-
-module.exports = ListPage;

client/homebrew/pages/basePages/listPage/listPage.less

@@ -1,190 +0,0 @@
-
-.noColumns(){
-	column-count         : auto;
-	column-fill          : auto;
-	column-gap           : normal;
-	column-width         : auto;
-	-webkit-column-count : auto;
-	-moz-column-count    : auto;
-	-webkit-column-width : auto;
-	-moz-column-width    : auto;
-	-webkit-column-gap   : normal;
-	-moz-column-gap      : normal;
-	height               : auto;
-	min-height           : 279.4mm;
-	margin               : 20px auto;
-	contain				 : unset;
-}
-.listPage{
-	.content{
-		z-index : 1;
-		.page{
-			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
-			&::after{
-				display : none;
-			}
-			.noBrews{
-				margin     : 10px 0px;
-				font-size  : 1.3em;
-				font-style : italic;
-			}
-			.brewCollection {
-				h1:hover{
-					cursor: pointer;
-				}
-				.active::before, .inactive::before {
-					font-family: 'Font Awesome 5 Free';
-					font-weight: 900;
-					font-size: 0.6cm;
-					padding-right: 0.5em;
-				}
-				.active {
-					color: var(--HB_Color_HeaderText);
-				}
-				.active::before {
-					content: '\f107';
-				}
-				.inactive {
-					color: #707070;
-				}
-				.inactive::before {
-					content: '\f105';
-				}
-			}
-		}
-	}
-	.sort-container {
-		font-family        : 'Open Sans', sans-serif;
-		position           : sticky;
-		top                : 0;
-		left               : 0;
-		width              : 100%;
-		height             : 30px;
-		background-color   : #555;
-		border-top         : 1px solid #666;
-		border-bottom         : 1px solid #666;
-		color              : white;
-		text-align         : center;
-		z-index            : 1;
-		display            : flex;
-		justify-content    : center;
-		align-items        : baseline;
-		column-gap         : 15px;
-		row-gap            : 5px;
-		flex-wrap          : wrap;
-		h6{
-			text-transform : uppercase;
-			font-family    : 'Open Sans', sans-serif;
-			font-size      : 11px;
-			font-weight    : bold;
-		}
-		.sort-option {
-			display: flex;
-			align-items: center;
-			padding: 0 8px;
-			color: #ccc;
-			height: 100%;
-
-			&:hover{
-				background-color : #444;
-			}
-
-			&.active {
-			font-weight: bold;
-			color: #ddd;
-			background-color: #333;
-
-			button {
-				color: white;
-				font-weight: 800;
-				height: 100%;
-				& + .sortDir {
-					padding-left: 5px;
-				}
-			}
-		}
-
-		}
-		.filter-option {
-			margin-left: 20px;
-			background-color : transparent !important;
-			font-size        : 11px;
-			i{
-				padding-right : 5px;
-			}
-		}
-		button{
-				background-color : transparent;
-				font-family      : 'Open Sans', sans-serif;
-				text-transform   : uppercase;
-				font-weight      : normal;
-				font-size        : 11px;
-				color            : #ccc;
-				padding          : 0;
-			}
-
-
-	}
-	.tags-container {
-		height             : 30px;
-		background-color   : #555;
-		border-top         : 1px solid #666;
-		border-bottom      : 1px solid #666;
-		color              : white;
-		display            : flex;
-		justify-content    : center;
-		align-items        : center;
-		column-gap         : 15px;
-		row-gap            : 5px;
-		flex-wrap          : wrap;
-		span {
-			font-family    : 'Open Sans', sans-serif;
-			font-size      : 11px;
-			font-weight    : bold;
-			border         : 1px solid;
-			border-radius  : 3px;
-			padding        : 3px;
-			cursor         : pointer;
-			color: #dfdfdf;
-			&:before {
-				font-family: 'Font Awesome 5 Free';
-				font-size: 12px;
-				margin-right: 3px;
-			}
-			&:after {
-				content: '\f00d';
-				font-family: 'Font Awesome 5 Free';
-				font-size: 12px;
-				margin-left: 3px;
-			}
-			&.type {
-				background-color: #008000;
-				border-color: #00a000;
-				&:before{
-					content: '\f0ad';
-				}
-			}
-			&.group {
-				background-color: #505050;
-				border-color: #000000;
-				&:before{
-					content: '\f500';
-				}
-			}
-			&.meta {
-				background-color: #000080;
-				border-color: #0000a0;
-				&:before{
-					content: '\f05a';
-				}
-			}
-			&.system {
-				background-color: #800000;
-				border-color: #a00000;
-				&:before{
-					content: '\f518';
-				}
-			}
-		}
-	}
-}

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -1,38 +0,0 @@
-require('./uiPage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../../navbar/navbar.jsx');
-const NewBrewItem = require('../../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../../navbar/help.navitem.jsx');
-const RecentNavItem = require('../../../navbar/recent.navitem.jsx').both;
-const Account = require('../../../navbar/account.navitem.jsx');
-
-
-const UIPage = createClass({
-	displayName : 'UIPage',
-
-	render : function(){
-		return <div className='uiPage sitePage'>
-			<Navbar>
-				<Nav.section>
-					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
-				</Nav.section>
-
-				<Nav.section>
-					<NewBrewItem />
-					<HelpNavItem />
-					<RecentNavItem />
-					<Account />
-				</Nav.section>
-			</Navbar>
-
-			<div className='content'>
-				{this.props.children}
-			</div>
-		</div>;
-	}
-});
-
-module.exports = UIPage;

client/homebrew/pages/basePages/uiPage/uiPage.less

@@ -1,69 +0,0 @@
-.homebrew {
-	.uiPage.sitePage {
-		.content {
-			width            : ~"min(90vw, 1000px)";
-			padding          : 2% 4%;
-			margin-top       : 25px;
-			margin-right     : auto;
-			margin-left      : auto;
-			overflow-y       : scroll;
-			font-family      : 'Open Sans';
-			font-size        : 0.8em;
-			line-height      : 1.8em;
-			background-color : #F0F0F0;
-			.dataGroup {
-				padding       : 6px 20px 15px;
-				margin        : 5px 0px;
-				border        : 2px solid black;
-				border-radius : 5px;
-				button {
-					background-color : transparent;
-					border           : 1px solid black;
-					border-radius    : 5px;
-					width            : 125px;
-					color            : black;
-					margin-right     : 5px;
-					&.active {
-						background-color: #0007;
-						color: white;
-						&:before {
-							content: '\f00c';
-    						font-family: 'FONT AWESOME 5 FREE';
-    						margin-right: 5px;
-						}
-					}
-				}
-			}
-			h1, h2, h3, h4 {
-				width          : 100%;
-				margin         : 0.5em 30% 0.25em 0;
-				font-weight    : 900;
-				text-transform : uppercase;
-				border-bottom  : 2px solid slategrey;
-			}
-			h1 {
-				margin-right  : 0;
-				margin-bottom : 0.5em;
-				font-size     : 2em;
-				border-bottom : 2px solid darkslategrey;
-			}
-			h2 { font-size : 1.75em; }
-			h3 {
-				font-size : 1.5em;
-				svg { width : 19px; }
-			}
-			h4 { font-size : 1.25em; }
-			strong { font-weight : bold; }
-			em { font-style : italic; }
-			ul {
-				padding-left : 1.25em;
-				list-style   : square;
-			}
-			.blank {
-				height     : 1em;
-				margin-top : 0;
-				& + * { margin-top : 0; }
-			}
-		}
-	}
-}

client/homebrew/pages/editPage/editPage.jsx

@@ -1,19 +1,17 @@
 /* eslint-disable max-lines */
 require('./editPage.less');
 const React = require('react');
-const _ = require('lodash');
 const createClass = require('create-react-class');
-
-const request = require('../../utils/request-middleware.js');
+const _ = require('lodash');
+const request = require('superagent');
 const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const PrintNavItem = require('../../navbar/print.navitem.jsx');
-const ErrorNavItem = require('../../navbar/error-navitem.jsx');
+const ReportIssue = require('../../navbar/issue.navitem.jsx');
+const PrintLink = require('../../navbar/print.navitem.jsx');
 const Account = require('../../navbar/account.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 
@@ -21,51 +19,52 @@ const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
-const LockNotification = require('./lockNotification/lockNotification.jsx');
-
 const Markdown = require('naturalcrit/markdown.js');
 
-const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
+const googleDriveActive = require('../../googleDrive.png');
+const googleDriveInactive = require('../../googleDriveMono.png');
 
-import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
-
-const googleDriveIcon = require('../../googleDrive.svg');
-
-const SAVE_TIMEOUT = 10000;
+const SAVE_TIMEOUT = 3000;
 
 const EditPage = createClass({
 	displayName     : 'EditPage',
 	getDefaultProps : function() {
 		return {
-			brew : DEFAULT_BREW_LOAD
+			brew : {
+				text      : '',
+				style     : '',
+				shareId   : null,
+				editId    : null,
+				createdAt : null,
+				updatedAt : null,
+				gDrive    : false,
+				trashed   : false,
+
+				title       : '',
+				description : '',
+				tags        : '',
+				published   : false,
+				authors     : [],
+				systems     : [],
+				renderer    : 'legacy'
+			}
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			brew                       : this.props.brew,
-			isSaving                   : false,
-			isPending                  : false,
-			alertTrashedGoogleBrew     : this.props.brew.trashed,
-			alertLoginToTransfer       : false,
-			saveGoogle                 : this.props.brew.googleId ? true : false,
-			confirmGoogleTransfer      : false,
-			error                      : null,
-			htmlErrors                 : Markdown.validate(this.props.brew.text),
-			url                        : '',
-			autoSave                   : true,
-			autoSaveWarning            : false,
-			unsavedTime                : new Date(),
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			displayLockMessage         : this.props.brew.lock || false,
-			themeBundle                : {}
+			brew                   : this.props.brew,
+			isSaving               : false,
+			isPending              : false,
+			alertTrashedGoogleBrew : this.props.brew.trashed,
+			alertLoginToTransfer   : false,
+			saveGoogle             : this.props.brew.googleId ? true : false,
+			confirmGoogleTransfer  : false,
+			errors                 : null,
+			htmlErrors             : Markdown.validate(this.props.brew.text),
+			url                    : ''
 		};
 	},
-
-	editor    : React.createRef(null),
 	savedBrew : null,
 
 	componentDidMount : function(){
@@ -75,14 +74,7 @@ const EditPage = createClass({
 
 		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
 
-		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true }, ()=>{
-			if(this.state.autoSave){
-				this.trySave();
-			} else {
-				this.setState({ autoSaveWarning: true });
-			}
-		});
-
+		this.trySave();
 		window.onbeforeunload = ()=>{
 			if(this.state.isSaving || this.state.isPending){
 				return 'You have unsaved changes!';
@@ -93,8 +85,6 @@ const EditPage = createClass({
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
-
 		document.addEventListener('keydown', this.handleControlKeys);
 	},
 	componentWillUnmount : function() {
@@ -106,8 +96,8 @@ const EditPage = createClass({
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const S_KEY = 83;
 		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) printCurrentBrew();
+		if(e.keyCode == S_KEY) this.save();
+		if(e.keyCode == P_KEY) window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
 			e.preventDefault();
@@ -115,19 +105,7 @@ const EditPage = createClass({
 	},
 
 	handleSplitMove : function(){
-		this.editor.current.update();
-	},
-
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
-
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
-
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
+		this.refs.editor.update();
 	},
 
 	handleTextChange : function(text){
@@ -136,54 +114,38 @@ const EditPage = createClass({
 		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
 
 		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
+			brew       : _.merge({}, prevState.brew, { text: text }),
 			isPending  : true,
-			htmlErrors : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
+			htmlErrors : htmlErrors
+		}), ()=>this.trySave());
 	},
 
 	handleStyleChange : function(style){
 		this.setState((prevState)=>({
-			brew      : { ...prevState.brew, style: style },
+			brew      : _.merge({}, prevState.brew, { style: style }),
 			isPending : true
-		}), ()=>{if(this.state.autoSave) this.trySave();});
+		}), ()=>this.trySave());
 	},
 
-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle(this, metadata.renderer, metadata.theme);
-
+	handleMetaChange : function(metadata){
 		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				...metadata
-			},
+			brew      : _.merge({}, prevState.brew, metadata),
 			isPending : true,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
+		}), ()=>this.trySave());
+
 	},
 
 	hasChanges : function(){
 		return !_.isEqual(this.state.brew, this.savedBrew);
 	},
 
-	updateBrew : function(newData){
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				style : newData.style,
-				text  : newData.text
-			}
-		}));
-	},
-
-	trySave : function(immediate=false){
+	trySave : function(){
 		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
 		if(this.hasChanges()){
 			this.debounceSave();
 		} else {
 			this.debounceSave.cancel();
 		}
-		if(immediate) this.debounceSave.flush();
 	},
 
 	handleGoogleClick : function(){
@@ -196,10 +158,7 @@ const EditPage = createClass({
 		this.setState((prevState)=>({
 			confirmGoogleTransfer : !prevState.confirmGoogleTransfer
 		}));
-		this.setState({
-			error    : null,
-			isSaving : false
-		});
+		this.clearErrors();
 	},
 
 	closeAlerts : function(event){
@@ -215,56 +174,118 @@ const EditPage = createClass({
 		this.setState((prevState)=>({
 			saveGoogle : !prevState.saveGoogle,
 			isSaving   : false,
-			error      : null
+			errors     : null
 		}), ()=>this.save());
 	},
 
+	clearErrors : function(){
+		this.setState({
+			errors   : null,
+			isSaving : false
+
+		});
+	},
+
 	save : async function(){
 		if(this.debounceSave && this.debounceSave.cancel) this.debounceSave.cancel();
 
 		this.setState((prevState)=>({
 			isSaving   : true,
-			error      : null,
+			errors     : null,
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));
 
-		await updateHistory(this.state.brew);
-		await versionHistoryGarbageCollection();
-
 		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
 
 		const brew = this.state.brew;
 		brew.pageCount = ((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
 
-		const params = `${transfer ? `?${this.state.saveGoogle ? 'saveToGoogle' : 'removeFromGoogle'}=true` : ''}`;
-		const res = await request
-			.put(`/api/update/${brew.editId}${params}`)
-			.send(brew)
-			.catch((err)=>{
-				console.log('Error Updating Local Brew');
-				this.setState({ error: err });
-			});
-		if(!res) return;
+		if(this.state.saveGoogle) {
+			if(transfer) {
+				const res = await request
+				.post('/api/newGoogle/')
+				.send(brew)
+				.catch((err)=>{
+					console.log(err.status === 401
+						? 'Not signed in!'
+						: 'Error Transferring to Google!');
+					this.setState({ errors: err, saveGoogle: false });
+				});
 
-		this.savedBrew = res.body;
-		history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
+				if(!res) { return; }
+
+				console.log('Deleting Local Copy');
+				await request.delete(`/api/${brew.editId}`)
+				.send()
+				.catch((err)=>{
+					console.log('Error deleting Local Copy');
+				});
+
+				this.savedBrew = res.body;
+				history.replaceState(null, null, `/edit/${this.savedBrew.googleId}${this.savedBrew.editId}`); //update URL to match doc ID
+			} else {
+				const res = await request
+				.put(`/api/updateGoogle/${brew.editId}`)
+				.send(brew)
+				.catch((err)=>{
+					console.log(err.status === 401
+						? 'Not signed in!'
+						: 'Error Saving to Google!');
+					this.setState({ errors: err });
+					return;
+				});
+
+				this.savedBrew = res.body;
+			}
+		} else {
+			if(transfer) {
+				const res = await request.post('/api')
+				.send(brew)
+				.catch((err)=>{
+					console.log('Error creating Local Copy');
+					this.setState({ errors: err });
+					return;
+				});
+
+				await request.get(`/api/removeGoogle/${brew.googleId}${brew.editId}`)
+				.send()
+				.catch((err)=>{
+					console.log('Error Deleting Google Brew');
+				});
+
+				this.savedBrew = res.body;
+				history.replaceState(null, null, `/edit/${this.savedBrew.editId}`); //update URL to match doc ID
+			} else {
+				const res = await request
+				.put(`/api/update/${brew.editId}`)
+				.send(brew)
+				.catch((err)=>{
+					console.log('Error Updating Local Brew');
+					this.setState({ errors: err });
+					return;
+				});
+
+				this.savedBrew = res.body;
+			}
+		}
 
 		this.setState((prevState)=>({
-			brew : { ...prevState.brew,
+			brew : _.merge({}, prevState.brew, {
 				googleId : this.savedBrew.googleId ? this.savedBrew.googleId : null,
 				editId 	 : this.savedBrew.editId,
-				shareId  : this.savedBrew.shareId,
-				version  : this.savedBrew.version
-			},
-			isPending   : false,
-			isSaving    : false,
-			unsavedTime : new Date()
+				shareId  : this.savedBrew.shareId
+			}),
+			isPending : false,
+			isSaving  : false,
 		}));
 	},
 
 	renderGoogleDriveIcon : function(){
 		return <Nav.item className='googleDriveStorage' onClick={this.handleGoogleClick}>
-			<img src={googleDriveIcon} className={this.state.saveGoogle ? '' : 'inactive'} alt='Google Drive icon'/>
+			{this.state.saveGoogle
+				? <img src={googleDriveActive} alt='googleDriveActive'/>
+				: <img src={googleDriveInactive} alt='googleDriveInactive'/>
+			}
 
 			{this.state.confirmGoogleTransfer &&
 				<div className='errorContainer' onClick={this.closeAlerts}>
@@ -297,28 +318,67 @@ const EditPage = createClass({
 					</div>
 				</div>
 			}
-
-			{this.state.alertTrashedGoogleBrew &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
-					<div className='confirm'>
-						OK
-					</div>
-				</div>
-			}
 		</Nav.item>;
 	},
 
 	renderSaveButton : function(){
-		if(this.state.autoSaveWarning && this.hasChanges()){
-			this.setAutosaveWarning();
-			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
-			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
+		if(this.state.errors){
+			let errMsg = '';
+			try {
+				errMsg += `${this.state.errors.toString()}\n\n`;
+				errMsg += `\`\`\`\n${this.state.errors.stack}\n`;
+				errMsg += `${JSON.stringify(this.state.errors.response.error, null, '  ')}\n\`\`\``;
+				console.log(errMsg);
+			} catch (e){}
 
-			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
-			Reminder...
+			if(this.state.errors.status == '401'){
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+					Oops!
+					<div className='errorContainer' onClick={this.clearErrors}>
+					You must be signed in to a Google account
+						to save this to<br />Google Drive!<br />
+						<a target='_blank' rel='noopener noreferrer'
+							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+							<div className='confirm'>
+								Sign In
+							</div>
+						</a>
+						<div className='deny'>
+							Not Now
+						</div>
+					</div>
+				</Nav.item>;
+			}
+
+			if(this.state.errors.response.req.url.match(/^\/api\/.*Google.*$/m)){
+				return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+					Oops!
+					<div className='errorContainer' onClick={this.clearErrors}>
+					Looks like your Google credentials have
+					expired! Visit our log in page to sign out
+					and sign back in with Google,
+					then try saving again!
+						<a target='_blank' rel='noopener noreferrer'
+							href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
+							<div className='confirm'>
+								Sign In
+							</div>
+						</a>
+						<div className='deny'>
+							Not Now
+						</div>
+					</div>
+				</Nav.item>;
+			}
+
+			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+				Oops!
 				<div className='errorContainer'>
-					{text}
+					Looks like there was a problem saving. <br />
+					Report the issue <a target='_blank' rel='noopener noreferrer'
+						href={`https://github.com/naturalcrit/homebrewery/issues/new?body=${encodeURIComponent(errMsg)}`}>
+						here
+					</a>.
 				</div>
 			</Nav.item>;
 		}
@@ -329,44 +389,13 @@ const EditPage = createClass({
 		if(this.state.isPending && this.hasChanges()){
 			return <Nav.item className='save' onClick={this.save} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
 		}
-		if(!this.state.isPending && !this.state.isSaving && this.state.autoSave){
-			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
-		}
 		if(!this.state.isPending && !this.state.isSaving){
 			return <Nav.item className='save saved'>saved.</Nav.item>;
 		}
 	},
 
-	handleAutoSave : function(){
-		if(this.warningTimer) clearTimeout(this.warningTimer);
-		this.setState((prevState)=>({
-			autoSave        : !prevState.autoSave,
-			autoSaveWarning : prevState.autoSave
-		}), ()=>{
-			localStorage.setItem('AUTOSAVE_ON', JSON.stringify(this.state.autoSave));
-		});
-	},
-
-	setAutosaveWarning : function(){
-		setTimeout(()=>this.setState({ autoSaveWarning: false }), 4000);                           // 4 seconds to display
-		this.warningTimer = setTimeout(()=>{this.setState({ autoSaveWarning: true });}, 900000);   // 15 minutes between warnings
-		this.warningTimer;
-	},
-
-	errorReported : function(error) {
-		this.setState({
-			error
-		});
-	},
-
-	renderAutoSaveButton : function(){
-		return <Nav.item onClick={this.handleAutoSave}>
-			Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
-		</Nav.item>;
-	},
-
 	processShareId : function() {
-		return this.state.brew.googleId && !this.state.brew.stubbed ?
+		return this.state.brew.googleId ?
 					 this.state.brew.googleId + this.state.brew.shareId :
 					 this.state.brew.shareId;
 	},
@@ -378,7 +407,7 @@ const EditPage = createClass({
 		const title = `${this.props.brew.title} ${systems}`;
 		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
 
-**[Homebrewery Link](${global.config.publicUrl}/share/${shareLink})**`;
+**[Homebrewery Link](https://homebrewery.naturalcrit.com/share/${shareLink})**`;
 
 		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
 	},
@@ -387,21 +416,25 @@ const EditPage = createClass({
 		const shareLink = this.processShareId();
 
 		return <Navbar>
+
+			{this.state.alertTrashedGoogleBrew &&
+				<div className='errorContainer' onClick={this.closeAlerts}>
+				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
+					<div className='confirm'>
+						OK
+					</div>
+				</div>
+			}
+
 			<Nav.section>
 				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
 			</Nav.section>
 
 			<Nav.section>
 				{this.renderGoogleDriveIcon()}
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					<Nav.dropdown className='save-menu'>
-						{this.renderSaveButton()}
-						{this.renderAutoSaveButton()}
-					</Nav.dropdown>
-				}
+				{this.renderSaveButton()}
 				<NewBrew />
-				<HelpNavItem/>
+				<ReportIssue />
 				<Nav.dropdown>
 					<Nav.item color='teal' icon='fas fa-share-alt'>
 						share
@@ -409,14 +442,14 @@ const EditPage = createClass({
 					<Nav.item color='blue' href={`/share/${shareLink}`}>
 						view
 					</Nav.item>
-					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.publicUrl}/share/${shareLink}`);}}>
+					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`https://homebrewery.naturalcrit.com/share/${shareLink}`);}}>
 						copy url
 					</Nav.item>
 					<Nav.item color='blue' href={this.getRedditLink()} newTab={true} rel='noopener noreferrer'>
 						post to reddit
 					</Nav.item>
 				</Nav.dropdown>
-				<PrintNavItem />
+				<PrintLink shareId={this.processShareId()} />
 				<RecentNavItem brew={this.state.brew} storageKey='edit' />
 				<Account />
 			</Nav.section>
@@ -430,39 +463,16 @@ const EditPage = createClass({
 			{this.renderNavbar()}
 
 			<div className='content'>
-				{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor
-						ref={this.editor}
+						ref='editor'
 						brew={this.state.brew}
 						onTextChange={this.handleTextChange}
 						onStyleChange={this.handleStyleChange}
 						onMetaChange={this.handleMetaChange}
-						reportError={this.errorReported}
 						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						snippetBundle={this.state.themeBundle.snippets}
-						updateBrew={this.updateBrew}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						allowPrint={true}
 					/>
+					<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} renderer={this.state.brew.renderer} errors={this.state.htmlErrors} />
 				</SplitPane>
 			</div>
 		</div>;

client/homebrew/pages/editPage/editPage.less

@@ -13,17 +13,87 @@
 			cursor : initial;
 			color  : #666;
 		}
+		&.error{
+			position         : relative;
+			background-color : @red;
+		}
 	}
 	.googleDriveStorage {
 		position : relative;
 	}
 	.googleDriveStorage img{
-		height	: 18px;
+		height	: 20px;
 		padding : 0px;
 		margin  : -5px;
-
-		&.inactive {
-			filter: grayscale(1);
+	}
+	.errorContainer{
+		animation-name: glideDown;
+		animation-duration: 0.4s;
+		position         : absolute;
+		top              : 100%;
+		left             : 50%;
+		z-index          : 100000;
+		width            : 140px;
+		padding          : 3px;
+		color            : white;
+		background-color : #333;
+		border           : 3px solid #444;
+		border-radius    : 5px;
+		transform        : translate(-50% + 3px, 10px);
+		text-align       : center;
+		font-size        : 10px;
+		font-weight      : 800;
+		text-transform   : uppercase;
+		a{
+			color : @teal;
+		}
+		&:before {
+			content: "";
+			width: 0px;
+			height: 0px;
+			position: absolute;
+			border-left: 10px solid transparent;
+			border-right: 10px solid transparent;
+			border-top: 10px solid transparent;
+			border-bottom: 10px solid #444;
+			left: 53px;
+			top: -23px;
+		}
+		&:after {
+			content: "";
+			width: 0px;
+			height: 0px;
+			position: absolute;
+			border-left: 10px solid transparent;
+			border-right: 10px solid transparent;
+			border-top: 10px solid transparent;
+			border-bottom: 10px solid #333;
+			left: 53px;
+			top: -19px;
+		}
+		.deny {
+			width            : 48%;
+		  margin           : 1px;
+			padding          : 5px;
+			background-color : #333;
+			display          : inline-block;
+			border-left      : 1px solid #666;
+			.animate(background-color);
+			&:hover{
+				background-color : red;
+			}
+		}
+		.confirm {
+			width            : 48%;
+			margin           : 1px;
+			padding          : 5px;
+			background-color : #333;
+			display          : inline-block;
+			color            : white;
+			.animate(background-color);
+			&:hover{
+				background-color : teal;
+			}
 		}
 	}
 }

client/homebrew/pages/editPage/lockNotification/lockNotification.jsx

@@ -1,30 +0,0 @@
-require('./lockNotification.less');
-const React = require('react');
-import Dialog from '../../../../components/dialog.jsx';
-
-function LockNotification(props) {
-	props = {
-		shareId     : 0,
-		disableLock : ()=>{},
-		message     : '',
-		...props
-	};
-
-	const removeLock = ()=>{
-		alert(`Not yet implemented - ID ${props.shareId}`);
-	};
-
-	return <Dialog className='lockNotification' blocking closeText='CONTINUE TO EDITOR' >
-		<h1>BREW LOCKED</h1>
-		<p>This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.</p>
-		<hr />
-		<h3>LOCK REASON</h3>
-		<p>{props.message || 'Unable to retrieve Lock Message'}</p>
-		<hr />
-		<p>Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.</p>
-		<p>Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.</p>
-		<button onClick={removeLock}>REQUEST LOCK REMOVAL</button>
-	</Dialog>;
-};
-
-module.exports = LockNotification;

client/homebrew/pages/editPage/lockNotification/lockNotification.less

@@ -1,27 +0,0 @@
-.lockNotification {
-	z-index          : 1;
-	width            : 80%;
-	padding          : 10px;
-	margin           : 5% 10%;
-	line-height      : 1.5em;
-	color            : black;
-	text-align       : center;
-	background-color : #CCCCCC;
-
-	&::backdrop { background-color : #000000AA; }
-
-	button {
-		margin           : 10px;
-		color            : white;
-		background-color : #333333;
-
-		&:hover { background-color : #777777; }
-	}
-
-	h1, h3 {
-		font-family : 'Open Sans', sans-serif;
-		font-weight : 800;
-	}
-	h1 { font-size : 24px; }
-	h3 { font-size : 18px; }
-}

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,25 +1,48 @@
 require('./errorPage.less');
-const React      = require('react');
-const UIPage     = require('../basePages/uiPage/uiPage.jsx');
-const Markdown   = require('../../../../shared/naturalcrit/markdown.js');
-const ErrorIndex = require('./errors/errorIndex.js');
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const cx = require('classnames');
 
-const ErrorPage = ({ brew })=>{
-	// Retrieving the error text based on the brew's error code from ErrorIndex
-	const errorText = ErrorIndex({ brew })[brew.HBErrorCode.toString()] || '';
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../navbar/navbar.jsx');
+const PatreonNavItem = require('../../navbar/patreon.navitem.jsx');
+const IssueNavItem = require('../../navbar/issue.navitem.jsx');
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 
-	return (
-		<UIPage brew={{ title: 'Crit Fail!' }}>
-			<div className='dataGroup'>
-				<div className='errorTitle'>
-					<h1>{`Error ${brew?.status || '000'}`}</h1>
-					<h4>{brew?.text || 'No error text'}</h4>
-				</div>
-				<hr />
-				<div dangerouslySetInnerHTML={{ __html: Markdown.render(errorText) }} />
+const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+
+const ErrorPage = createClass({
+	getDefaultProps : function() {
+		return {
+			ver     : '0.0.0',
+			errorId : ''
+		};
+	},
+
+	text : '# Oops \n We could not find a brew with that id. **Sorry!**',
+
+	render : function(){
+		return <div className='errorPage sitePage'>
+			<Navbar ver={this.props.ver}>
+				<Nav.section>
+					<Nav.item className='errorTitle'>
+						Crit Fail!
+					</Nav.item>
+				</Nav.section>
+
+				<Nav.section>
+					<PatreonNavItem />
+					<IssueNavItem />
+					<RecentNavItem />
+				</Nav.section>
+			</Navbar>
+
+			<div className='content'>
+				<BrewRenderer text={this.text} />
 			</div>
-		</UIPage>
-	);
-};
+		</div>;
+	}
+});
 
 module.exports = ErrorPage;

client/homebrew/pages/errorPage/errorPage.less

@@ -1,13 +1,5 @@
-.homebrew {
-	.uiPage.sitePage {
-		.errorTitle {
-			//background-color: @orange;
-			color      : #D02727;
-			text-align : center;
-		}
-		.content {
-			h1, h2, h3, h4 { border-bottom : none; }
-			hr { border-bottom : 2px solid slategrey; }
-		}
+.errorPage{
+	.errorTitle{
+		background-color: @orange;
 	}
 }